Angular 表格不'；如果以编程方式设置输入值，则不会触发验证

我在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>

我这样做是因为我有相同的表单用于编辑现有元素和创建新元素，如果在

ngOnInit

中，我尝试从服务中获取元素，以防在参数中收到id。如果是这样，当我收到元素时，我将其设置为

elementToEdit

到目前为止，这工作正常，

输入

在收到元素后立即获取该值。我遇到的问题是，当这种情况发生时，表单的验证不会被触发，因此即使输入不是空的，按钮也会显示为禁用状态

---

有人知道如何解决这个问题，以便在输入值更改时触发表单验证吗？

对于反应式表单，您不直接将值绑定到模板中，这就是

formControlName

的用途。而是更新实例并让Angular更新显示的值、验证状态等：

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

---

我建议您浏览一下文档：

您能创建一个plunker吗？

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