如何为Angular响应式表单的嵌套FormArray执行patch操作

核心原理 #

Angular的patchValue方法只会更新已存在的表单控件，不会自动增删FormArray中的子项，因此嵌套的联系人contacts数组需要单独手动处理，不能直接通过顶层表单的patchValue完成赋值。

新增协议时的提交代码 #

每次新增协议时，直接构造和agrmntsForm结构完全匹配的FormGroup（包含嵌套的contacts FormArray），再插入到mainForm的agreements数组中即可：

// 新增协议提交方法
addNewAgreement() {
  // 获取mainForm中的协议数组
  const agreementsArr = this.mainForm.get('agreements') as FormArray;
  // 读取新增表单的全量值
  const newAgrmntValue = this.agrmntsForm.getRawValue();

  // 构造完整的协议FormGroup，单独处理嵌套的联系人数组
  const newAgrmntGroup = this.formBuilder.group({
    sales_price: [newAgrmntValue.sales_price],
    closing_cost_support: [newAgrmntValue.closing_cost_support],
    financing: [newAgrmntValue.financing],
    contract_date: [newAgrmntValue.contract_date],
    inspection_period: [newAgrmntValue.inspection_period],
    closing_date: [newAgrmntValue.closing_date],
    // 把联系人数组的每一项转为FormGroup，组成FormArray
    contacts: this.formBuilder.array(
      newAgrmntValue.contacts.map(contactItem => this.formBuilder.group(contactItem))
    )
  });

  // 把新协议添加到主表单的协议数组
  agreementsArr.push(newAgrmntGroup);

  // 可选：重置新增表单，方便下一次输入
  this.agrmntsForm.reset();
  (this.agrmntsForm.get('contacts') as FormArray).clear();
}

编辑已有协议时的Patch代码 #

如果是回显已有协议到第一个表单修改后提交更新，需要单独清空目标协议的原有联系人数组再赋值：

// 更新指定索引的协议
updateAgreement(agreementIndex: number) {
  const agreementsArr = this.mainForm.get('agreements') as FormArray;
  const targetAgrmnt = agreementsArr.at(agreementIndex) as FormGroup;
  const updatedValue = this.agrmntsForm.getRawValue();

  // Patch基础字段
  targetAgrmnt.patchValue({
    sales_price: updatedValue.sales_price,
    closing_cost_support: updatedValue.closing_cost_support,
    financing: updatedValue.financing,
    contract_date: updatedValue.contract_date,
    inspection_period: updatedValue.inspection_period,
    closing_date: updatedValue.closing_date,
  });

  // 手动处理嵌套联系人数组
  const targetContactsArr = targetAgrmnt.get('contacts') as FormArray;
  // 清空原有联系人
  targetContactsArr.clear();
  // 插入更新后的所有联系人
  updatedValue.contacts.forEach(contact => {
    targetContactsArr.push(this.formBuilder.group(contact));
  });
}

注意事项 #

如果你的联系人表单有校验规则，构造FormGroup的时候需要把对应的校验器也加上，保证主表单里的联系人校验逻辑和新增表单一致。

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