雙向（雙人間）綁定在角模型驅動的反應形式

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