2016-06-01 17 views
6

私はControlGroupでフォームを構築しており、その中にクラスオブジェクトをロードしています。しかし、私は時間のタイトルの半分に記載されているエラーにぶち当たっています。いくつかのフォームは読み込みを行い、そうでないものもあります。角2 Typescript:TypeError:this.validatorは関数ではありません

私はそうのようなクラスファイルがあります:私はこのような制御でクラスをロード私のUserDetailComponentで

export class User { 
    id: number; 
    email: string; 
    sign_in_count: number; 
    created_at: string; 
    first_name: string; 
    last_name: string; 
    birth_date: Date; 
    news_letter: boolean; 
    fb_id: string; 
    gender: boolean; 
    phone: string; 
    picture: any; 
} 

を:その最後の行に

export class UserDetailComponent implements OnInit { 
    user: User; 
    userDetailForm: ControlGroup; 

    constructor(
     private form: FormBuilder, 
     private _userService: UserService, 
     private _router: Router, 
     private params: RouteSegment 
    ) { } 
    ngOnInit() { 
     this.user = this._userService.getUser(); 
     if (this.user === undefined) { 
      this._userService.getSingleUser(this.params.getParam('id')) 
       .subscribe(data => (this.user = data, this.setForm())); 
     } else { 
      this.setForm(); 
     } 
    } 

    setForm() { 
     this.userDetailForm = this.form.group(this.user); 
    } 
} 

私はエラーを取得しますスタックトレースは以下のとおりです。

browser_adapter.ts:78 TypeError: this.validator is not a function 
    at Control.AbstractControl._runValidator (model.ts:146) 
    at Control.AbstractControl.updateValueAndValidity (model.ts:128) 
    at new Control (model.ts:282) 
    at FormBuilder.control (form_builder.ts:32) 
    at FormBuilder._createControl (form_builder.ts:66) 
    at eval (form_builder.ts:50) 
    at Function.StringMapWrapper.forEach (collection.ts:132) 
    at FormBuilder._reduceControls (form_builder.ts:49) 
    at FormBuilder.group (form_builder.ts:19) 
    at UserDetailComponent.setForm (user-detail.component.ts:95) 
+1

コンストラクタでフォームを作成し、 'UserService'のデータが到着したときにのみ値を更新する(または要素を追加/削除する)必要があるかもしれません。 –

+0

FormBuilderとは何ですか?それは輸入ですか? –

+0

@StianStandahlはい@角度/共通のインポートです - https://angular.io/docs/ts/latest/api/common/FormBuilder-class.html – Ruben

答えて

1

コンストラクタでフォームを作成します。 Angularがバインディングを解決しようとする最初の試みでフォームを見つけられなかった場合、それは機能しません。

this.userDetailFormは、空のグループまたはいくつかの静的コントロールで初期化する必要があります。次に、サーバーからデータが到着したら、コントロールを追加/削除して値を更新して、グループを更新します。

23

フォームビルダーの値の配列を間違った方法でバインドしていたときに、このエラーが発生しました。

私が何をしたか

それがあるべき方法

fb.group({items: [1, 2, 3, 4]}) 

fb.group({items: [[1, 2, 3, 4]]}) 

あなたは配列にすべてをラップする必要があり、それ以外の角度が[1, 2, 3, 4]フォームコントロールであると考えていますではなく、フォーム制御値の定義です。

+0

これ!私はコードを書かなくてもモデルを管理することができます(この余分なコードが古くなったり、テストが必要になるリスクがあります)。それを解決するより良い方法は、IMO。 –

+0

ああ!もちろん、それが配列の場合は、2番目の値がバリデーターになることを期待しています。これを追跡するには年を取っていたでしょうか。 – Joe

関連する問題