角模型驱动反应形式中的双向(双)结合

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>

​

在更新user.name字段时，是否有一种方法可以使input的值自动更新(双向绑定，就像模板驱动的input)？

Answer 1

这是可能的。

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

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

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

看这个普鲁克尔。

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

就像这样：

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

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