角度模型驱动反应形式的双向(双)约束

时间:2017-05-17 16:24:10

标签: angular angular-reactive-forms

这是一个界面:

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>
&#13;
&#13;
&#13;

user.name字段更新时,有没有办法让ngModel的值自动更新(双向绑定就像模板驱动的input一样?)

1 个答案:

答案 0 :(得分:3)

这是可能的。

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

并在您的html中添加[(ngModel)]="name",如下所示:

<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];
    }
  })