Angular v12嵌套表单控件异常排查及解决方案咨询

错误1：Cannot find control with path: 'sections -> 0 -> buildingComponents -> 0 -> label' #

原因 #

构建buildingComponents数组时，你用formBuilder.control(x)把后端返回的完整对象包装成了FormControl，但模板里却用formGroupName="j"绑定——这是核心矛盾：

• FormControl是单个值控件，只能通过formControlName或[formControl]绑定，无法匹配formGroupName（后者专门对应FormGroup）。
• 模板尝试访问label子控件，但当前bc是FormControl，不存在任何子控件，因此Angular找不到指定路径。

解决方法 #

将buildingComponents数组内的元素从FormControl改为FormGroup，匹配模板的formGroupName绑定逻辑：

result.formSections.forEach(x => {
  this.sectionsFormArr.push(
    this.formBuilder.group({
      buildingComponents: this.formBuilder.array(
        // 把每个后端返回的item转成FormGroup，而非FormControl
        x.buildingComponents.map(item => this.formBuilder.group({
          label: [item.label, item.required ? Validators.required : null],
          id: [item.id],
          required: [item.required],
          textOptions: this.formBuilder.group({
            value: [item.textOptions?.value]
          })
          // 按需添加item中的其他字段
        }))
      ),
    })
  );
});

模板结构可保留，此时buildingComponents内的每个元素都是FormGroup，formGroupName="j"和formControlName="label"能正确匹配对应控件。

错误2：No value accessor for form control with unspecified name attribute #

原因 #

使用自定义组件时，同时绑定[formControl]="bc"和[id]="bc.value.id"会导致Angular表单绑定识别冲突；另外，自定义组件模板中的外层<form>标签会干扰表单上下文的传递，加剧绑定异常。

解决方法 #

方法1：改用formControlName绑定（推荐）

既然buildingComponents已是FormGroup数组，直接用formControlName="."绑定整个FormGroup到自定义组件：

<div formArrayName="sections">
  <div *ngFor="let section of sectionsFormArr.controls; let i=index">
    <div [formGroupName]="i">
      <div formArrayName="buildingComponents">
        <div *ngFor="let bc of section.get('buildingComponents')['controls']; let j=index">
          <div [formGroupName]="j">
            <!-- 用"."绑定当前整个FormGroup的值到自定义组件 -->
            <app-text-building-component formControlName="." [id]="bc.value.id"></app-text-building-component>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

方法2：优化自定义组件模板

移除组件模板中外层的<form>标签（自定义组件本身已是表单控件的一部分，无需额外表单上下文）：

<!-- 去掉外层<form>，直接绑定formGroup -->
<div [formGroup]="textOptions">
  <label [appIsRequired]="isRequired">{{ textComponent.value.label}}</label>
  <div class="input-group mb-2">
    <input formControlName="value" type="text" class="form-control"/>
  </div>
</div>

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