Angular 10升级至15后出现Cannot find control with path错误

问题现象 #

项目从Angular 10升级到Angular 15后，控制台抛出错误：

ERROR Error: Cannot find control with path: 'mappedHeaders -> 0 -> value'

原代码在Angular 10中可正常运行，升级后出现上述控件路径找不到的问题。

相关代码 #

example.ts #

headerArray: FormArray;
formGroup: FormGroup;

constructor(private fb: FormBuilder) {
    this.headerArray = this.fb.array([]);
    this.formGroup = this.fb.group({
      mappedHeaders: this.headerArray
    });
}

// 网络请求完成后推入控件的代码
const mapped = result['mappedHeaders'];
for (const accountHeader of this.accountHeaders.sort()) {
    this.headerArray.push(this.fb.control({
        key: accountHeader,
        value: mapped[accountHeader]
    }));
}

example.html #

<div [formGroup]="formGroup">
    <table>
        <tbody formArrayName="mappedHeaders">
            <ng-container *ngFor="let header of accountHeaders; index as i">
                <tr>
                    <td>{{i}}</td>
                    <td [formGroupName]="i">
                        <select class="ui fluid clearable selection search dropdown column-mapping-dropdown" formControlName="value">
                            <option *ngFor="let header of fileHeaders" [value]="header">{{ header }}</option>
                        </select>
                    </td>
                </tr>
            </ng-container>
        </tbody>
    </table>
</div>

问题原因 #

核心矛盾在于FormArray元素类型与模板绑定语法不匹配：

• 代码中向headerArray（FormArray）推入的是FormControl（通过fb.control()创建），每个控件包裹了一个包含key和value的对象；
• 但模板中使用了[formGroupName]="i"，这个语法是用来绑定FormGroup的，Angular会尝试在FormArray的第i个元素（FormControl）中查找名为value的子控件，自然找不到，从而抛出路径错误。

Angular 10对这种不规范的写法兼容性较强，未严格校验控件类型匹配，但Angular 15的表单模块收紧了校验规则，因此触发错误。

解决方案 #

将FormArray中的元素从FormControl改为FormGroup，确保模板的formGroupName绑定对应正确的控件类型：

修改推入控件的代码：

const mapped = result['mappedHeaders'];
for (const accountHeader of this.accountHeaders.sort()) {
    this.headerArray.push(this.fb.group({
        key: [accountHeader],
        value: [mapped[accountHeader]]
    }));
}

这样每个FormArray元素都是包含key和value两个FormControl的FormGroup，模板中的[formGroupName]="i"和formControlName="value"就能正确匹配到对应的控件，错误即可解决。

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