フォームは、プログラム的

Question

私はAngular2で、このようなフォームを持って検証をトリガしません：

<form [formGroup]="form" (ngSubmit)="onSubmit()"> 
    <input type="text" id="name" formControlName="name" value="{{elementToEdit?.name}}"> 
    <button type="submit" [disabled]="!form.valid">Save</button> 
</form> 

とコンポーネントのコードは次のようになります。

export class ElementEditComponent implements OnInit { 
    form: FormGroup; 
    elementToEdit: Element; 

    constructor(fb: FormBuilder, 
      private elementService: ElementService) { 
      this.form = fb.group({ 
       "name": new FormControl("", Validators.required) 
      }); 
    } 

    ngOnInit() { 
    this.route.params 
    .switchMap((params: Params) => this.recipeService.getElement(+params['id'])) 
    .subscribe(element => this.elementToEdit = element); 
    } 
} 

私はこれは、既存の要素を編集したり、新しい要素を作成したりするために同じフォームを使用しているためです。ngOnInit私が受け取っている場合に備えて、サービスから要素を取得しようとしています。パラメータ内のID。もしそうなら、私は要素を受け取ったときにelementToEditに設定します。

これはこれまでのところうまく動作し、inputは要素が受信されるとすぐに値を取得します。私が持っている問題は、フォームの検証がトリガされないので、入力が空でなくてもボタンが無効に見えるということです。

どのように私はこれを解決することができますので、入力の値が変更されたときにフォームの検証がトリガされることを知っていますか？

Answer 1

反応型では、値をテンプレートに直接バインドしません。つまり、formControlNameが対象です。代わりに、あなたはFormGroupインスタンスを更新し、ドキュメントを通じてアンギュラ更新表示された値、検証ステータスなど：

ngOnInit() { 
    this.route.params 
    .switchMap((params: Params) => this.recipeService.getElement(+params['id'])) 
    .subscribe(element => this.form.patchValue(element); 
} 

私が実行しているお勧め

を聞かせて：https://angular.io/docs/ts/latest/guide/reactive-forms.html