响应式表单中如何将totals数组值合并到FormArray的rows行中？

根据你的需求，有两种实用的实现方式，你可以结合自己的业务场景来选择：

方式一：将数据整合到FormArray控件中（适合需要在表单中展示或验证amount/total的场景） #

首先，要确保你的FormArray里每个FormGroup都包含amount和total这两个控件。如果之前创建FormGroup时没添加，需要先补上：

// 假设你用FormBuilder创建FormGroup，调整成如下结构
const rowGroup = this.fb.group({
  // 保留你原本的所有字段，比如name、quantity等
  name: ['', Validators.required],
  quantity: [1, Validators.min(1)],
  // 添加amount和total控件，初始值可设为0或空
  amount: [0],
  total: [0]
});
// 将这个group加入FormArray
rows.push(rowGroup);

接下来，在你的patchValues方法中，把this.totals对应的数据批量更新到FormArray的每个控件里：

patchValues() {
  const rows = this.myForm.get('rows') as FormArray;
  
  // 先校验数量是否匹配，避免数组越界
  if (this.totals.length !== rows.length) {
    console.warn('注意：totals和rows的数量不匹配，无法批量赋值');
    return;
  }

  // 遍历每个FormGroup，把对应index的totals数据patch进去
  rows.controls.forEach((formGroup, index) => {
    const targetTotal = this.totals[index];
    formGroup.patchValue({
      amount: targetTotal.amount,
      total: targetTotal.total
    });
  });
}

之后在提交方法里，直接获取表单值就会包含这两个字段了：

onCreateProduct(){ 
  // 如果还没执行过patchValues，记得先调用
  this.patchValues();
  
  const formData = { products: this.myForm.get('rows').value };
  console.log(formData); // 现在每个product都会有amount和total字段
}

方式二：提交时临时合并数据（适合不需要在表单中处理amount/total，仅提交时需要的场景） #

如果不需要在表单控件中维护这两个值，只是提交的时候要一起发送，可以直接在提交方法里手动合并rows和totals的数据：

onCreateProduct(){ 
  const rawRows = this.myForm.get('rows').value;
  
  // 用map合并每行数据和对应的totals项
  const products = rawRows.map((row, index) => {
    // 确保index不超出totals的范围，避免报错
    const totalItem = this.totals[index] || { amount: 0, total: 0 };
    return {
      ...row, // 保留原表单的所有字段
      amount: totalItem.amount,
      total: totalItem.total
    };
  });
  
  const formData = { products };
  console.log(formData);
}

这种方式不需要修改你的FormArray结构，更轻量化，适合那些不需要在页面上展示amount和total的场景。

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