Angular表单功能正常但报Cannot find control with path错误求助

控制台错误Cannot find control with path: 'keysToChange -> Label 3 -> 2'的核心原因有两点：

• FormGroup与模板路径不匹配：模板中用keysToChangeKeys[i]（如Label 3）作为formGroupName，但initializeForm方法给keysToChange FormGroup添加的是key1、key2这类键名，两者完全不对应，Angular找不到对应的表单组。
• 错误嵌套表单控制：模板中嵌套了<ng-container [formControlName]="i">，但当前上下文是包含id和date的表单组，此处应直接访问组内控件，而非添加一个不存在的索引型FormControl。

1. 修正模板中的表单路径关联 #

将模板中的[formGroupName]改为使用FormGroup中实际存在的键（即iterKeys），同时移除错误的[formControlName]="i"容器：

<form [formGroup]="patchForm">
  <ng-container formGroupName="keysToChange">
    <div *ngFor="let key of iterKeys; let i = index" [formGroupName]="key">
      <input matInput formControlName="id">
      <input matInput placeholder="Choose a date" formControlName="date">
    </div>
  </ng-container>
</form>

如果需要展示detailsToDisplay中的标签，可结合数据遍历：

<form [formGroup]="patchForm">
  <ng-container formGroupName="keysToChange">
    <div *ngFor="let detail of detailsToDisplay; let i = index" [formGroupName]="iterKeys[i]">
      <h3>{{ detail.label }}</h3>
      <input matInput formControlName="id">
      <input matInput placeholder="Choose a date" formControlName="date">
    </div>
  </ng-container>
</form>

2. 匹配表单组与遍历项数量（可选） #

若只需展示3组表单（对应detailsToDisplay的长度），可调整initializeForm逻辑，只添加对应数量的控件：

initializeForm() {
  // 只取与detailsToDisplay数量匹配的key
  this.keysToChange.slice(0, this.detailsToDisplay.length).forEach((key) => {
    const formGroup = this.fb.nonNullable.group({
      id: new FormControl(''),
      date: new FormControl(''),
    });
    this.patchForm.controls.keysToChange.addControl(key, formGroup);
  });
  this.iterKeys = Object.keys(this.patchForm.controls.keysToChange.controls);
}

修改后，Angular能正确匹配表单控件路径，控制台错误会消失，表单功能保持正常。

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