Angular编辑输入框时FormArray值未更新的原因排查

场景与问题 #

我有一个包含普通FormControl和FormArray的Angular响应式表单，核心代码如下：

competitionForm!: FormGroup;    

this.competitionForm = new FormGroup({
  name: new FormControl(this.competition.name, []),
  about: new FormControl(this.competition.about, []),
  rules: new FormControl(this.competition.rules, []),
  competitorNames: new FormArray([]),
});

get refCompetitorNames() {
  return this.competitionForm.get('competitorNames') as FormArray;
}

模板中使用自定义输入组件app-input绑定FormArray内的每个FormControl：

<form [formGroup]="competitionForm">    
    <div formArrayName="competitorNames">
        <ng-container *ngFor="let competitor of refCompetitorNames.controls">
          <app-input
            [control]="$any(competitor)"
            [placeholder]="'name'"
            [type]="'text'"
          ></app-input>
        </ng-container>
      </div>
</form>

问题表现：输入框能正常显示并编辑值，但通过this.competitionForm.value.competitorNames获取数据时，始终返回初始的旧值；而直接通过this.refCompetitorNames.at(i).value能拿到每个控件的最新值。

核心原因分析 #

最可能的触发原因是操作FormArray控件时未使用官方API，导致表单变更通知未正确触发：
如果添加/删除FormArray内的FormControl时，直接修改controls数组（比如refCompetitorNames.controls.push(new FormControl(''))），而非使用FormArray提供的push()/insert()/removeAt()等方法，那么FormArray不会向父级FormGroup发送值变更通知。此时：

• 单个FormControl的value是独立维护的，所以at(i).value能拿到最新值；
• FormGroup在计算value时，无法感知FormArray内部的变化，会返回旧的快照数据。

验证与解决 #

确保所有操作FormArray控件的逻辑都使用官方API：

// 添加新的参赛者输入控件
addCompetitor() {
  this.refCompetitorNames.push(new FormControl(''));
}

// 删除指定索引的参赛者控件
removeCompetitor(index: number) {
  this.refCompetitorNames.removeAt(index);
}

使用这些方法时，FormArray会自动触发变更通知，FormGroup的value也会同步更新，此时this.competitionForm.value.competitorNames就能拿到最新的数组值。

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