Angular 模型驱动的响应式表单中的两种方式（双）绑定答案

【问题标题】：Two Way (Double) Binding in Angular Model Driven Reactive FormsAngular 模型驱动的响应式表单中的两种方式（双）绑定
【发布时间】：2017-05-17 16:24:09
【问题描述】：

这是一个界面：

interface User { name: string; }

和一个反应形式：

ngOnInit() {
  this.formGroup = this.fb.group({
    name: [user.name, Validators.required]
  });
}

<form [formGroup]="formGroup" novalidate>
  <input type="text" formControlName="name">
</form>

当input 字段更新时，有没有办法让user.name 的值自动更新（双向绑定，就像模板驱动的ngModel）？

【问题讨论】：

标签： angular angular-reactive-forms

【解决方案1】：

这是可能的。

首先您需要将FormsModule 旁边的FormsModule 导入到您的项目中。

并将[(ngModel)]="name" 添加到您的 html 中，如下所示：

<form [formGroup]="formGroup">
    <input type="text" [(ngModel)]="name" formControlName="test">
</form>

看到这个plunkr。

通过订阅更新模型： 您可以订阅formGroup valueChange并分别编辑您的模型。

像这样：

  this.formGroup.valueChanges.subscribe((changes) => {
    this.submitObj = changes;

    for(let propName in changes){
      this.test[propName] = changes[propName];
    }
  })

【讨论】：

哇哦，所以反应式表单本身并不支持它:-(
我已经扩展了我的答案并更新了我的 plunkr 示例。我希望这会有所帮助=)
好的。所以我假设你所说的 full reactive way 是另一种选择？