如何将包含多个对象的数组传入Angular FormControl？

问题根源在于你用普通FormControl存储数组类型的数据，Angular的FormControl仅支持单个值，因此会自动截取数组的第一个元素。正确的做法是使用FormArray管理数组型表单数据，具体实现步骤如下：

1. 初始化表单时定义FormArray #

引入Angular表单相关模块后，用FormBuilder创建包含FormArray的表单：

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

constructor(private fb: FormBuilder) {}

ngOnInit(): void {
  // 初始化表单，将control字段设为空FormArray
  this.form = this.fb.group({
    control: this.fb.array([])
  });
}

2. 将data数组同步到FormArray #

若已有this.array（由data对象组成的数组），需将每个data对象转换为FormGroup后添加到FormArray中：

// 获取对应的FormArray实例
const controlArray = this.form.get('control') as FormArray;
// 清空原有内容（可选，根据业务需求）
controlArray.clear();

// 遍历数组，逐个添加FormGroup
this.array.forEach(item => {
  controlArray.push(this.fb.group({
    input: item.input,
    description: item.description
  }));
});

如果想用patchValue同步数据，需确保FormArray中已有对应数量的FormGroup，之后直接调用：

const controlArray = this.form.get('control') as FormArray;
controlArray.patchValue(this.array);

3. 获取完整数组值 #

通过FormArray的value属性即可获取完整的数组：

const fullDataArray = (this.form.get('control') as FormArray).value;
// fullDataArray即为包含所有data对象的完整数组

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