如何在Angular中实现表格行动态增删并提交表单至后端

我正在尝试创建一个包含可动态增删行表格的Angular表单，样式参考下图：

我已经完成了Angular表单的开发，但在编写将表单数据发送至后端的函数时遇到了问题，后端功能正常，问题出在前端代码。

由于taxRateDetailsForm是数组表单，我该如何获取其表单行数据并正确POST至后端？

add-tax-rate.component.html #

<tbody [formGroup]="taxRateDetilsForm">    
    <ng-container formArrayName="tableRows" *ngFor="let group of getFormControls.controls; let i=index">
        <tr [formGroupName]="i">
            <td>
                <div class="my-3">
                    <button type="button" class="btn btn-default btn-lg" (click)="addRow()"><i class="fa-solid fa-square-plus" style="color: #b95bf2;"></i></button>
                    <button type="button" class="btn btn-default btn-lg" (click)="removeEmployee(i)"><i class="fa-solid fa-square-minus" style="color: #f11616;"></i></button>
                </div>
            </td>
            <td>
                <div class="col form-group my-4">
                    <input formControlName="hsn_sac_no" type="text" name="hsn_sac_no" class="form-control form-control-sm" placeholder="Hsn sac no">
                </div>
            </td>
            <td>
                <div class="col form-group my-4">
                    <input formControlName="description" type="text" name="description" class="form-control form-control-sm" placeholder="description">
                </div>
            </td>
            <td>
                <div class="col form-group my-4">
                    <input formControlName="from_date" type="date" name="from_date" class="form-control form-control-sm" placeholder="From Date">
                </div>
            </td>
            <td>
                <div class="col form-group my-4">
                    <input formControlName="to_date" type="date" name="to_date" class="form-control form-control-sm" placeholder="To Date">
                </div>
            </td>
            <td>
                <div class="col form-group my-4">
                    <input formControlName="tax_rate" type="number" name="tax_rate" class="form-control form-control-sm" placeholder="Tax Rate">
                </div>
            </td>
            <td>
                <div class="col form-group my-4">
                    <label class="form-check-label form-control-sm" for="rcm_flag" id="active_tax_details">Inactive</label>
                    <!-- <mat-slide-toggle [checked]="taxRateDetilsForm.get('rcm_flag')!.value" (change)="toggle2($event)" class="smaller-slide-toggle" id="mat-slider"></mat-slide-toggle> -->
                    <!-- <mat-slide-toggle [checked]="group.get('rcm_flag')!.value" (change)="toggle2($event)" class="smaller-slide-toggle" id="mat-slider"></mat-slide-toggle> -->
                    <mat-slide-toggle formControlName="rcm_flag" (change)="toggle2($event)" class="smaller-slide-toggle" id="mat-slider"></mat-slide-toggle>
                    <label class="form-check-label" for="rcm_flag" id="inactive_tax_details">Active</label>
                </div>
            </td>
            <td>
                <div class="col form-group my-4">
                    <input formControlName="cess" type="number" name="cess" class="form-control form-control-sm" placeholder="Cess">
                </div>
            </td>
        </tr>
    </ng-container>
</tbody>

add-tax-rate-component.ts #

@Component({
  selector: 'app-add-tax-rate',
  templateUrl: './add-tax-rate.component.html',
  styleUrls: ['./add-tax-rate.component.css'],
})
export class AddTaxRateComponent {
  public taxRateDetailsForm: FormGroup;
  constructor(private service: TaxRateService, private router: Router, private fb: FormBuilder) {
    this.taxRateDetailsForm = this.fb.group({
      tableRows: this.fb.array([], [Validators.required])
    });
    this.addRow();
  }
  createFormGroup(): FormGroup {
    return this.fb.group({
      header_ref_id: new FormControl<number | null>(null, Validators.required),
      hsn_sac_no: new FormControl('', Validators.required),
      description: new FormControl('', Validators.required),
      from_date: new FormControl(new Date(), Validators.required),
      to_date: new FormControl(new Date(), Validators.required),
      tax_rate: new FormControl('', Validators.required),
      rcm_flag: new FormControl(true,),
      cess: new FormControl('', Validators.required),
    });
  }
  get getFormControls() {
    const control = this.taxRateDetailsForm.get('tableRows') as FormArray;
    return control;
  }
  addRow() {
    const control = this.taxRateDetailsForm.get('tableRows') as FormArray;
    const taxRatePK = this.TaxRateList ? this.TaxRateList[0].pk : null;
    control.push(this.createFormGroup());
  }
  removeEmployee(index: number) {
    const control = this.taxRateDetailsForm.get('tableRows') as FormArray;
    control.removeAt(index);
  }
  TaxAuthorityList: any;
  TaxRateList: any;
  ngOnInit(): void {
    this.refreshList();
  }
  refreshList() {
    this.service.getTaxAuthority().subscribe((data: Tax[]) => {
      // console.log(data);
      this.TaxAuthorityList = data;
      this.TaxAuthorityList.forEach((taxauthority: Tax) => {
        console.log(taxauthority.pk, taxauthority.name);
      });
    });
    
    this.service.getTaxRatePK().subscribe((data: TaxRatePK[]) => {
      // console.log(data);
      this.TaxRateList = data;
      this.TaxRateList.forEach((taxrate: TaxRatePK) => {
        // console.log(taxrate.pk, taxrate.tax_rate_name);
        this.taxRateDetailsForm.patchValue({
          header_ref_id: taxrate.pk
        });
      });
    });
  }
  data: any
  form1 = new FormGroup({
    tax_rate_name: new FormControl('', Validators.required),
    tax_authority_ref_id: new FormControl('', Validators.required),
    tax_type_ref_id: new FormControl('', Validators.required),
    is_active: new FormControl(true),
  });
  
  addTaxRate() {
    const form1Data = this.form1.value;
    const form2Data: any[] = [];
    const control = this.taxRateDetailsForm.get('tableRows') as FormArray;
    control.controls.forEach((group: AbstractControl<any, any>) => {
      if (group instanceof FormGroup) {
        form2Data.push(group.value);
      }
    });
    this.service.addTaxRate(form1Data).subscribe(() => {
      this.service.addTaxRateDetails({ data: form2Data }).subscribe(() => {
        // Both form1 and form2 data have been successfully submitted
        this.router.navigate(['/viewtaxrate']);
      });
    });
  }
}

补充说明：我已找到问题解决方案，具体实现可查看对应代码仓库。

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