双向（双人间）绑定在角模型驱动的反应形式

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的值（双向绑定就像模板驱动的ngModel）当input字段得到更新？

Answer 1

这是可能的。

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

并添加[(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]; 
    } 
    })