如何在Reactive Forms中为对象数组类型字段的指定属性执行setValue操作

错误原因 #

你之前的写法不生效是因为 this.Form.get('dynamics') 返回的是 AbstractControl 抽象类型，并不是普通数组，无法直接通过索引 [0] 访问子元素，需要先将其断言为 FormArray 类型后再操作。

正确实现步骤 #

1. 先获取FormArray实例 #

import { FormArray } from '@angular/forms'; // 确保导入对应类型

// 将dynamics控件断言为FormArray类型
const dynamicsArr = this.Form.get('dynamics') as FormArray;

2. 访问指定下标元素并赋值 #

两种写法均可：

• 推荐使用at()方法，类型安全性更高：

// 给第0项的value字段赋值
dynamicsArr.at(0).get('value')?.setValue(result);

• 也可以通过controls属性访问数组后用索引取值：

dynamicsArr.controls[0].get('value')?.setValue(result);

注意事项 #

操作前要确保FormArray中已经存在对应下标的FormGroup控件，如果是首次从接口拿到数据需要先初始化FormArray的内容：

// 示例：接口返回数据后初始化动态表单数组
const apiResult = {
  "dynamics": [
    { "field": "Country", "operator": "", "value": "", "value2": "", "andOr": "", "date": "2021-10-04T16:11:57.965Z" },
    { "field": "", "operator": "", "value": "", "value2": "", "andOr": "", "date": "2021-10-04T16:19:18.835Z" }
  ]
}
const dynamicsArr = this.Form.get('dynamics') as FormArray;
// 清空原有控件（按需调整）
dynamicsArr.clear();
// 遍历数据生成对应FormGroup插入数组
apiResult.dynamics.forEach(item => {
  dynamicsArr.push(
    this.fb.group({
      field: [item.field],
      operator: [item.operator],
      value: [item.value],
      value2: [item.value2],
      andOr: [item.andOr],
      date: [item.date]
    })
  )
})

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