如果設定輸入值表不會觸發驗證編程

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