Angular 13+TS表单报错：无法找到builderPreferences->idx下的控件路径

核心错误原因 #

你遇到的Cannot find control with path错误，根源在HTML模板的表单组绑定上：

<div class="row g-3" formGroupName="idx">

这里的idx是*ngFor循环中定义的索引变量，但你直接写了字符串"idx"，Angular会尝试在builderPreferences数组中查找名为idx的表单组，而非对应索引位置的表单组，导致路径匹配失败。

修正方案 #

将formGroupName="idx"改为属性绑定形式，使用方括号绑定到索引变量：

<div class="row g-3" [formGroupName]="idx">

完整修正后的HTML关键片段 #

<ul class="amount-list" *ngIf="builderPreferences?.length" formArrayName="builderPreferences" >
  <li *ngFor="let builderPreference of builderPreferences.controls; let idx = index">  
    <!-- 修正formGroupName的绑定方式 -->
    <div class="row g-3" [formGroupName]="idx">
      <div class="col-3">
        <select formControlName="groupId" class="form-control mb-3">
          <option value="undefined" selected>Select Group</option>
          <option *ngFor="let group of groups" value="{{ group.id }}">
            {{ group.name }}
          </option>
        </select>
      </div>
      <div class="col-3">
        <select formControlName="manufacturerId" class="form-control mb-3">
          <option value="undefined" selected>-- Select Manufacturer / Division -- </option>
          <option *ngFor="let manufacturer of manufacturers" value="{{ manufacturer.id }}">
            {{ manufacturer.name }}
          </option>
        </select>
      </div>
      <div class="col-1">
        <button type="button" name="delete" class="btn btn-text" (click)="deletePreference(idx)">
          <i class="fa fa-trash"></i>
        </button>
      </div>         
    </div>
  </li>
</ul>

额外验证说明 #

你的TS代码中表单数组的构建逻辑是正确的：

• newPreference()方法正确向builderPreferences数组添加包含groupId和manufacturerId的表单组
• loadDetail()方法中通过formBuilder.array重新构建表单数组并替换原控件的逻辑无误

修正后，Angular就能正确定位到builderPreferences -> [索引] -> groupId/manufacturerId的控件路径，错误即可消除。

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