Angular 模型驱动的反应形式中的双向（双）绑定

Question

这是一个界面：

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）？

Answer 1

有可能。

首先，您需要将 ReactiveFromsModule 旁边的 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];
    }
  })

Angular 模型驱动的反应形式中的双向（双）绑定

Two Way (Double) Binding in Angular Model Driven Reactive Forms

angular

angular-reactive-forms