[Formarray][SubmitForm][Angular]无法从formarray提交值

Question

我正在尝试提交来自表单数组的值。但是它不起作用......这是代码

<form  *ngIf="incomeForm" [formGroup]="incomeForm" (ngSubmit)="onSubmitForm()">
  <table class="table table-border">
    <thead>
    <th>Description</th>
    <th>somme</th>
    </thead>
    <tbody>
    <ng-container formArrayName="budgetIncomes" *ngFor="let item of incomesArray.controls; let i=index">

        <tr *ngIf="item.get('isEditable').value" [formGroupName]="i">

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

        <tr *ngIf="!item.get('isEditable').value">
            <td>{{item.get('label').value}}</td>
            <td>{{item.get('somme').value}}</td>
            <button (click)="editRow(item)">edit</button>
        </tr>
    </ng-container>
    </tbody>
  </table>
  <div class="action-container">
    <button class="add" (click)="addIncome()">Add Income</button>
  </div>
  <button type="submit" class="btn btn-primary">Enregistrer</button>
</form>

<p class="result" [ngStyle]="{'color': getSum()>=0? 'green' : 'red'}">{{getSum()}}</p>

  onSubmitForm() {
  const formValue = this.incomeForm.value;
  const newBudget = new Budget(
formValue['label'],
formValue['somme']
 )
 this.budgetService.validateBudget(newBudget);

}

newBudget 的值似乎是未定义的，但我不明白为什么？

有什么想法吗？

提前谢谢！ :)

Answer 1

你的表单结构是这样的：

-- FormGroup: incomeForm
---- FormArray: budgetIncomes
------ FormGroup: 
-------- FormControl: label
-------- FormControl: somme

这意味着你的表单值的数据结构将是这样的：

{
  incomeForm: {
    budgetIncomes: [
      { 
        label: string,
        somme: number
      },
      { 
        label: string,
        somme: number
      },
      // ... 
    ]
  }
}

因此您将能够使用以下代码获取Budget 对象的数组：

onSubmitForm() {
  const formValue = this.incomeForm.value;
  const budgets = formValue.budgetIncomes.map(group => new Budget(
    group['label'],
    group['somme']
  ));

  // TODO: validate budgets...
}