Angular动态required输入框不影响form.invalid及绑定字段联动问题

问题核心原因 #

你遇到的同名字段同步变更的问题，根源是Array.fill()方法的特性：你传入的new Result()只会创建1个对象实例，数组的所有元素都指向同一个引用，修改任意一个元素的属性都会同步影响所有元素。

修复方案 #

1. 重写动态数组初始化逻辑 #

把component.ts中generatePlayerCards方法里的数组初始化代码替换为如下写法，为每个位置创建独立的Result实例：

generatePlayerCards() {
  const totalCount = this.model.numOfTeams * this.model.numOfPlayers;
  // 每个元素都是独立的Result实例
  this.model.players = Array.from({length: totalCount}).map(() => new Result());
  // 如果你还维护了单独的ngArr数组，同步更新它的长度即可
  this.ngArr = new Array(totalCount);
}

2. 可选优化：简化循环逻辑 #

你可以直接用model.players作为*ngFor的循环对象，不需要单独维护ngArr数组，避免两边长度不一致的问题，修改HTML代码即可：

<div *ngFor="let player of model.players; let i = index; trackBy:trackByIndex;" class="col-4 mt-3">

3. 表单提交取值 #

校验正常后，提交时直接读取this.model.players就能拿到所有动态输入框的表单值，直接传给后端服务接口即可。

补充说明 #

你之前动态输入框不触发表单校验的问题，是因为模板驱动表单要求动态控件必须同时具备name属性和ngModel绑定才能被注册到表单实例中，你后续补充了这两个配置后，校验自然会生效，当前的required规则可以正常影响form.invalid状态。

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