Angular FormArray动态新增行时显示相同值如何解决

调用方法向Angular响应式表单的FormArray动态新增行后，所有行展示的输入值完全一致，效果如下：

问题出在模板的输入框绑定逻辑，和FormArray本身的创建逻辑无关：

• 响应式表单的dr输入框上同时写了formControlName="dr"和ngModel={{transactionCode}}，所有行的输入框都绑定到组件全局的同一个transactionCode变量，直接覆盖了每个子FormGroup独立控件的状态，导致所有行的值强制同步。
• Angular 6及以上版本官方明确不支持在响应式表单控件上混用ngModel做绑定，这种写法本身就会破坏响应式表单的独立状态管理逻辑，引发值同步异常。

• 移除模板中输入框上冗余的ngModel绑定，完全遵循响应式表单的状态管理逻辑，不要混用模板驱动表单的绑定语法。
• 如果需要给新增行设置transactionCode作为默认值，在TS层创建行对应的FormGroup时直接给控件传入初始值，不要在模板层绑定全局变量。

修正后的模板代码 #

<form [formGroup]="Form">
<div formArrayName="ItemRec">
<table>
<thead>
<tr>
<th>FORM</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let ItemRec of ItemRec.controls; let i = index;" 
[formGroupName]="i">
<td (click)="removeRow(i)" style="width:100px" align="center">
<i class="fa fa-trash fa-2x"></i></td>
<td>
<input style="width:200px" class="form-control"
formControlName="dr">
</td>
</tr>
</tbody>
</table>
</div>
</form>

修正后的组件逻辑代码 #

this.Form = this.fb.group({
    Id:['0'],
    ItemRec: this.fb.array([this.CreateItemRec()])
  })

// 改造行创建方法，支持传入dr字段的默认值
CreateItemRec(drDefault: string = ''): FormGroup {
    return this.fb.group({
      id:[0],
      dr: new FormControl(drDefault, Validators.required),
    })
}

get ItemRec(): FormArray {
  return this.Form.get('ItemRec') as FormArray
}

addRow(): void {
  // 新增行时直接给当前行控件传入需要的默认值
  this.ItemRec?.push(this.CreateItemRec(this.transactionCode));
}

内容的提问来源于stack exchange，提问作者Yan