如何解决Angular响应式表单表格每行FormControlName重复的问题

问题原因 #

你当前的setFormControlName方法没有关联单元格对应的行、列索引，每次变更检测触发方法执行时，所有单元格会拿到同一个返回值，因此出现formControlName重复、所有单元格同步更新为最新值的问题。

解决方案 #

全局递增的formControlName可以直接通过 行索引 * 总列数 + 列索引 的公式计算得到，无需复杂逻辑：

1. 修改HTML代码，给方法传入当前行索引i和当前列索引j：

<td formArrayName="cells" *ngFor="let col of cells.controls; let j = index">
  <textarea pInputTextarea name="criteria-val" [cols]="30" [rows]="5" [formControlName]="setFormControlName(i, j)"></textarea>
</td>

2. 修改TypeScript代码，替换原有setFormControlName方法：

setFormControlName(rowIndex: number, colIndex: number): number {
  const columnCount = this.scoreHeaders.length;
  return rowIndex * columnCount + colIndex;
}

3. 补充联动逻辑（必做）：

• 新增行时，需要给cells FormArray 追加 当前总列数 个新的FormControl
• 新增列时，需要给cells FormArray 追加 当前总行数 个新的FormControl
  确保cells的总控件数始终等于 总行数 * 总列数，否则会出现FormControl找不到的报错。

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