Angular2中FormArray嵌套FormArray的代码实现咨询

嘿，我来帮你搞定这个Angular嵌套FormArray的实现问题！先从你的代码结构入手，一步步拆解关键点：

首先你已经创建了一个包含嵌套FormArray的表单，结构是外层MainArray，每个元素里又包含ChildArray1和ChildArray2两个子FormArray，格式化后的代码是这样的：

this.MainForm = this.fb.group({
  MainArray: this.fb.array([
    {
      ChildArray1: this.fb.array([]),
      ChildArray2: this.fb.array([]),
    }
  ]),
});

看你后续的方法代码，应该是想把this.MillDetails里的数据批量填充到这个嵌套FormArray里，但目前的写法有几个需要调整的地方，我给你梳理下正确的实现步骤：

1. 封装FormArray的getter（更简洁） #

获取外层MainArray的时候，建议封装成getter方法，避免重复写类型断言，代码更整洁：

// 在组件类里添加这个getter
get mainArray(): FormArray {
  return this.MainForm.get('MainArray') as FormArray;
}

2. 循环创建包含子数组的表单组 #

你现在代码里定义的MainArray、AddressArray这些变量没用到，应该直接循环创建FormGroup并添加到mainArray里，同时还要处理每个组里的ChildArray1和ChildArray2（如果有对应数据的话）：

假设你的MainModel里包含Name、Age，还有对应子数组的数据源（比如childItems1、childItems2），修正后的方法代码大概是这样：

// 先清空原有的表单数组（避免重复填充）
this.mainArray.clear();

for (let i = 0; i < this.MillDetails.length; i++) {
  // 转换数据到模型类
  const s = new MainModel().from(this.MillDetails[i]);
  
  // 生成ChildArray1的表单数组（如果有子数据的话）
  const childArray1 = this.fb.array(
    s.childItems1?.map(item => this.fb.group({
      // 根据你的子数据结构定义控件，比如：
      subProp1: [item.subProp1],
      subProp2: [item.subProp2, Validators.required]
    })) || []
  );

  // 生成ChildArray2的表单数组
  const childArray2 = this.fb.array(
    s.childItems2?.map(item => this.fb.group({
      subPropA: [item.subPropA],
      subPropB: [item.subPropB]
    })) || []
  );

  // 创建包含子数组的外层表单组
  const mainGroup = this.fb.group({
    Name: [s.Name, null],
    Age: [s.Age, null], // 补充完整你的控件规则
    ChildArray1: childArray1,
    ChildArray2: childArray2
  });

  // 将组添加到外层MainArray
  this.mainArray.push(mainGroup);
}

3. 避坑提醒 #

• 绝对不要直接把普通JS对象push到FormArray里，必须用fb.group()或fb.array()创建表单控件实例，否则表单无法追踪值变化和验证状态
• 即使子数组初始为空，也要用fb.array([])创建，不能用普通空数组[]
• 批量填充前记得调用clear()清空原有表单元素，避免重复添加

如果还有具体的问题，比如子数组的模板渲染、表单验证或者数据回显细节，随时补充就好！

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