表单中多个重复ControlValueAccessor实例值互相覆盖问题排查

你遇到的问题核心是循环生成的控件使用了重复的name、id和模板变量名，导致Angular模板驱动表单无法区分不同控件，最终出现值互相覆盖的情况。

具体错误点： #

• 所有app-test组件的name和id都设为"test"，而Angular模板驱动表单是通过name属性来唯一标识表单控件的。多个控件共用同一个name时，表单会把它们当作同一个控件处理，后续输入的值会覆盖之前的。
• 模板变量#test="ngModel"也重复使用了相同的变量名，这会导致模板中后面的变量覆盖前面的，进一步引发逻辑混乱。

修复方案： #

为循环中的每个控件生成唯一的标识，利用循环的$index即可快速实现：

修改后的模板代码：

<form
  id="form1"
  name="form1"
  (submit)="save()"
  novalidate
  #form1="ngForm"
  [ngClass]="{ 'was-validated': form1.submitted }"
>
  <div *ngFor="let test of tests; let $index = index" class="mb-5">
    <app-test
      [id]="'test-' + $index"
      [name]="'test-' + $index"
      [(ngModel)]="test.value"
      #testCtrl="ngModel"
    ></app-test>
  </div>

  <button type="submit">submit</button>
</form>

组件类代码保持不变：

public tests = [
  { value: 'test one' },
  { value: 'test 2' },
  { value: 'test3' },
];

这样每个app-test组件都有了唯一的name和id，模板变量也用了不重复的testCtrl，表单就能正确区分每个控件，值也就不会互相覆盖了。

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