Angular开发FormArray绑定时报Cannot find control with path: 'notes'错误

报错核心原因 #

模板渲染阶段，模板已经在尝试绑定FormArray下对应索引的控件，但此时FormArray中尚未添加对应索引的控制项。

代码中的问题点 #

• 循环逻辑错误：在同一个*ngFor中同时遍历学生列表etudiantfilter和FormArray控件列表notes.controls，两个独立数组的渲染时机无法保证完全同步，容易出现控件未加载就提前渲染的问题。
• 初始化时机不合理：使用setTimeout延迟1秒才往FormArray中push控件，但Angular初始变更检测会在页面加载时立即执行模板渲染，此时FormArray为空，找不到索引0、1对应的控件直接触发报错。
• 校验状态判断逻辑冗余：不需要在*ngFor中单独遍历notes.controls，直接通过索引取控件判断校验状态即可。

修复步骤 #

1. 调整FormArray初始化逻辑，去掉不必要的setTimeout，确保学生列表加载完成后同步初始化所有note控件，避免渲染时控件缺失：

addNoteField() {
  // 先清空原有控件，避免重复push导致索引错乱
  this.notes.clear();
  for (let i = 0; i < this.etudiantfilter.length; i++) {
    this.notes.push(this.fb.control('', [Validators.required, Validators.pattern(note_REGEX)]));
  }
}

如果etudiantfilter是异步接口返回的数据，需要在接口请求的成功回调中调用addNoteField，不要依赖定时器延迟
2. 修正模板的循环逻辑，去掉多余的notes.controls遍历，直接通过索引匹配FormArray的控件：

<div formArrayName="notes" *ngIf="notes">
  <li class="table-row" *ngFor="let student of etudiantfilter; let i = index">
    <div class="col col-1" data-label="student number">{{ i + 1 }}</div>
    <div class="col col-2" data-label="Name"> {{ student.nom }} {{ student.prenom }}</div>
    <div class="col col-3" data-label="note">
      <mat-form-field>
        <input matInput [formControlName]="i">
        <mat-error>
          <span>note 00..20 </span>
        </mat-error>
      </mat-form-field>
      <label *ngIf="notes.at(i).invalid" [ngClass]="'error'"> note is required. </label>
    </div>
  </li>
</div>

3. 额外优化：给外层绑定FormArray的div加上*ngIf="notes"判断，确保FormArray实例初始化完成后再渲染内部逻辑，避免空实例引发的其他报错。

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