如何在Angular表单中循环生成tax_rate_details行并自动填充数据？

需求 #

• 循环渲染tax_rate_details数组的每一项到表单输入框
• 自动填充数组项对应的数据值
• 为每个数组项调用addNewRow方法

具体修改步骤 #

1. HTML模板修改 #

使用Angular的*ngFor指令遍历表单数组，绑定每个数组项的表单控件以自动填充对应数据：

<!-- 基于FormArray的表单结构示例 -->
<div formArrayName="tax_rate_details" *ngFor="let item of taxRateDetailsArray.controls; let idx = index">
  <div [formGroupName]="idx">
    <!-- 绑定输入框到数组项的属性，自动填充值 -->
    <input type="number" formControlName="tax_rate" [value]="item.value.tax_rate">
    <input type="text" formControlName="tax_description" [value]="item.value.tax_description">
    <!-- 根据实际业务字段添加其他输入控件 -->
  </div>
</div>

2. TypeScript组件修改 #

在组件初始化或数据加载完成后，遍历tax_rate_details数据源，逐个调用addNewRow并填充表单数据：

import { FormBuilder, FormArray, FormGroup, Validators } from '@angular/forms';

// 组件类核心逻辑
constructor(private fb: FormBuilder) {}

ngOnInit(): void {
  // 假设从接口/本地获取的tax_rate_details数据源
  const taxDetails = this.dataSource.tax_rate_details;

  // 遍历数组，为每个项执行添加表单行+填充数据操作
  taxDetails.forEach(detail => {
    // 调用addNewRow添加新的表单行
    this.addNewRow();
    // 获取最新添加的表单组，填充对应数据
    const latestRow = this.taxRateDetailsArray.at(this.taxRateDetailsArray.length - 1) as FormGroup;
    latestRow.patchValue({
      tax_rate: detail.tax_rate,
      tax_description: detail.tax_description,
      // 匹配其他需要填充的业务字段
    });
  });
}

// 获取表单数组的快捷访问器
get taxRateDetailsArray(): FormArray {
  return this.mainForm.get('tax_rate_details') as FormArray;
}

// 原有addNewRow方法（需确保操作目标为FormArray）
addNewRow(): void {
  this.taxRateDetailsArray.push(this.fb.group({
    tax_rate: [null, Validators.required],
    tax_description: ['', Validators.required]
    // 根据业务需求定义其他表单控件及验证规则
  }));
}

说明 #

已找到完整的实现方案，可查看对应代码仓库中的具体代码细节。

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