Angular 14响应式表单数组报错：_updateTreeValidity/get非函数及绑定问题

核心错误点 #

1. FormArray初始化错误：你直接把普通JS对象放进FormArray，但FormArray的元素必须是FormGroup/FormControl实例，纯对象无法被识别为表单控件，导致初始化失败。
2. 模板绑定错误：你用addForm.value.indicator[0]绑定formGroup，但addForm.value是表单的值对象，不是表单控件实例，自然没有_updateTreeValidity、get这些表单控件专属方法，所以触发报错。

修复后的TS代码 #

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

// 组件类内部
addForm: FormGroup;

constructor(private formBuilder: FormBuilder) {
  this.addForm = this.formBuilder.group({
    indicator: this.formBuilder.array([
      // 每个元素需用formBuilder.group创建FormGroup实例
      this.formBuilder.group({ accessLevel: '0' }),
      this.formBuilder.group({ accessLevel: '0' })
    ])
  });
}

// 给FormArray创建getter，简化模板调用
get indicators(): FormArray {
  return this.addForm.get('indicator') as FormArray;
}

修复后的HTML代码 #

必须在外层添加[formGroup]="addForm"绑定，同时用indicators.at(index)获取对应FormGroup实例：

<form [formGroup]="addForm">
  <div class="row" formArrayName="indicator">
    <div class="col-md-6">
      <label class="form-label">Sale</label>
      <div class="field-checkbox d-block mb-0" [formGroup]="indicators.at(0)">
        <p-radioButton name="accessLevel" value="001" formControlName="accessLevel"></p-radioButton>
        <label>Yes</label>
        <p-radioButton name="accessLevel" value="0" formControlName="accessLevel" class="ms-4"></p-radioButton>
        <label>No</label>
      </div>
    </div>
    <div class="col-md-6">
      <label class="form-label">Buy</label>
      <div class="field-checkbox d-block mb-0" [formGroup]="indicators.at(1)">
        <p-radioButton name="accessLevel" value="002" formControlName="accessLevel"></p-radioButton>
        <label>Yes</label>
        <p-radioButton name="accessLevel" value="0" formControlName="accessLevel" class="ms-4"></p-radioButton>
        <label>No</label>
      </div>
    </div>
  </div>
</form>

额外提示 #

如果需要动态增减FormArray元素，直接操作indicators实例即可，比如添加元素：indicators.push(this.formBuilder.group({ accessLevel: '0' }))。

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