FormBuilder创建数组类型控件时Application属性为Object的解决方法

解决方案 #

你遇到的问题根因是Angular响应式表单中，数组类型的表单字段必须通过FormArray类型声明，直接把数组传给普通FormControl的默认值时，Angular会自动解析为普通对象结构存储，所以类型不符合预期。

你可以按以下步骤修改代码：

1. 首先从@angular/forms中导入FormArray依赖
2. 声明表单时，Application字段使用FormBuilder.array()方法创建控件：

错误写法示例

this.form = this.fb.group({
  // 错误：直接传数组给普通FormControl，最终存储类型为对象
  Application: [defaultAppArray, Validators.required]
})

正确写法示例

// 先将数组的每一项转为对应的FormGroup（根据你的实际字段调整内部属性）
const appControlList = defaultAppArray.map(item => {
  return this.fb.group({
    id: [item.id],
    appName: [item.appName],
    // 其他子字段按需添加
  })
})

this.form = this.fb.group({
  // 用fb.array包裹生成的控件列表，声明为FormArray类型
  Application: this.fb.array(appControlList, Validators.required)
})

补充注意事项 #

• 如果需要动态增删Application的数组项，调用FormArray实例的push()/removeAt()/clear()等内置方法操作即可，不要直接修改控件的value属性
• 取值时调用this.form.get('Application').value即可得到标准数组类型的结果

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