Angular FormArray动态插入值后HTML不渲染问题排查

核心错误有2个：

1. 直接向FormArray.value中push普通对象属于无效操作：value是表单控件对外返回的只读状态快照，不是Angular用来追踪表单状态、对接模板绑定的控件集合，往里面塞普通JS对象不会生成对应的FormGroup/FormControl实例，模板遍历controls属性时拿不到有效控件，自然无法渲染、无法绑定值。
2. 类型转换错误：formula字段本身是FormArray类型，强转为FormControl会导致后续调用FormArray专属方法（比如push、insert、clear）时出现逻辑偏差。

1. 正确获取FormArray实例 #

先在组件类中写一个getter，安全获取formula对应的FormArray实例，避免重复写类型转换代码：

get formulaArr(): FormArray {
  return this.createCalcForm.get('formula') as FormArray;
}

2. 接口数据赋值逻辑 #

遍历接口返回数据时，每一条都通过已有的createItem4()方法生成真实的子FormGroup实例，按规则给控件设值后，将FormGroup实例push到FormArray的控件集合中：

// 接口请求拿到返回值后
this.dynamicformats = res.formula;
// 先清空FormArray原有内容，避免重复追加控件
this.formulaArr.clear();

this.dynamicformats.forEach(item => {
  // 生成符合校验规则的子表单组
  const itemGroup = this.createItem4();
  if (item.type === 'data') {
    // data类型给data_point2控件赋值
    itemGroup.get('data_point2').setValue(item.data_point_id);
  }
  if (item.type === 'operation') {
    // operation类型给function控件赋值
    itemGroup.get('function').setValue(item.value);
  }
  // 向FormArray中追加控件实例，不是往value里塞普通对象
  this.formulaArr.push(itemGroup);
});

3. 模板绑定参考写法 #

确认模板中响应式表单的嵌套层级正确，formArrayName、formGroupName、formControlName的绑定层级对应：

<form [formGroup]="createCalcForm">
  <!-- 其他普通FormControl字段省略 -->

  <div formArrayName="formula">
    <div *ngFor="let item of formulaArr.controls; let idx = index" [formGroupName]="idx">
      <!-- 运算操作符下拉，绑定function控件 -->
      <select formControlName="function">
        <option value="+">加</option>
        <option value="-">减</option>
        <option value="*">乘</option>
        <option value="/">除</option>
      </select>

      <!-- 数据点下拉，绑定data_point2控件 -->
      <select formControlName="data_point2">
        <option *ngFor="let dp of dataPointOptions" [value]="dp.id">{{dp.name}}</option>
      </select>
    </div>
  </div>
</form>

• 永远不要直接修改表单控件的value属性，所有值更新操作必须通过setValue/patchValue方法完成，控件的增删必须操作FormArray/FormGroup本身的控件集合。
• FormArray的controls属性是模板遍历、表单校验、状态追踪的核心，只能往里面塞入AbstractControl类型的实例（FormGroup、FormControl、FormArray），不能传入普通JS对象。
• 类型转换必须匹配控件实际类型：FormArray类型的字段不要强转为FormControl，避免运行时调用方法出错。

内容的提问来源于stack exchange，提问作者manish-111111