Angular中FormArray表单值提交失败问题求助

首先，你的提交逻辑和模板里存在两个关键问题，导致newBudget的属性值为undefined：

1. 表单值的结构理解偏差 #

你的表单核心是一个名为budgetIncomes的FormArray，所以this.incomeForm.value的结构并不是顶层包含label和somme，实际结构应该是这样的：

{
  budgetIncomes: [
    { label: "餐饮支出", somme: -200, isEditable: false },
    { label: "工资收入", somme: 5000, isEditable: true },
    // ...更多条目
  ]
}

你直接通过formValue['label']和formValue['somme']取值，这两个键在顶层对象里根本不存在，自然会返回undefined。

2. 模板中混用响应式表单与模板驱动表单语法 #

你的input标签同时使用了formControlName（响应式表单）和ngModel（模板驱动表单），这会导致表单值同步异常，甚至可能让FormArray的控件值无法正确更新到表单对象中。

修复步骤 #

步骤1：清理模板中的冲突语法 #

把input标签里的ngModel属性删掉，修改后的模板代码片段：

<td><input type="text" formControlName="label"></td>
<td><input type="number" formControlName="somme" [ngStyle]="{'color': item.get('somme').value >=0? 'green' : 'red'}"></td>

步骤2：调整提交方法，正确获取FormArray中的值 #

根据你的业务需求，选择对应的提交逻辑：

场景1：提交所有收入/支出项

onSubmitForm() {
  const formValue = this.incomeForm.value;
  // 取出FormArray中的所有条目
  const allIncomeItems = formValue.budgetIncomes;
  
  // 遍历每个条目，创建Budget实例并提交
  allIncomeItems.forEach(item => {
    const newBudget = new Budget(item.label, item.somme);
    this.budgetService.validateBudget(newBudget);
  });
}

场景2：只提交当前处于编辑状态的项

onSubmitForm() {
  const formValue = this.incomeForm.value;
  // 筛选出正在编辑的条目
  const activeEditItem = formValue.budgetIncomes.find(item => item.isEditable);
  
  if (activeEditItem) {
    const newBudget = new Budget(activeEditItem.label, activeEditItem.somme);
    this.budgetService.validateBudget(newBudget);
  } else {
    console.log("没有处于编辑状态的条目");
  }
}

调试小技巧：可以在提交方法里加一行console.log(formValue)，打印表单的完整结构，这样能更直观地确认取值路径是否正确。

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