Angular7中用FormBuilder实现带验证与初始值的动态表格行

作为Angular新手，你遇到的核心问题是FormArray的结构与HTML绑定不匹配，以及添加行的方法逻辑错误。我会一步步帮你修正代码，让表单正常工作：

第一步：修正添加行的方法（Component.ts） #

你当前的addDetails和addInitialRows方法里，push的是单个FormControl，但每一行应该对应一个完整的FormGroup（也就是你定义的addDetailsGroupToForm返回的结构）。修改这两个方法：

addDetails() {
  // 每次添加一个完整的表单组，而非单个控件
  this.details.push(this.addDetailsGroupToForm());
}

addInitialRows(){
  console.log("addInitialRows called");
  // 循环添加5个完整的表单组
  for(let i=0; i<5; i++){
    this.details.push(this.addDetailsGroupToForm());
  }
  console.log(this.details);
}

第二步：修正HTML模板的绑定逻辑（Component.html） #

FormArray中的每个元素是FormGroup，所以必须在循环的<tr>上添加[formGroupName]="i"，这样内部的formControlName才能正确关联到对应行的表单组：

<tbody>
  <!-- 必须添加[formGroupName]="i"来绑定当前行的表单组 -->
  <tr *ngFor="let detail of details.controls ; let i = index" [formGroupName]="i">
    <td>
      <ng-select 
        [items]="skillLevelsList" 
        bindLabel="skilllevel" 
        placeholder="Select Skill" 
        [clearable]="false" 
        formControlName="skilllevel" 
        [ngClass]="{ 'is-invalid': submitted && detail.get('skilllevel').errors }">
      </ng-select>
    </td>
    <td>
      <input type="text" formControlName="uom" class="form-control" placeholder="Enter UOM">
    </td>
    <td>
      <input type="number" formControlName="requirequantity" class="form-control" placeholder="Enter Quantity">
    </td>
    <td>
      <ng-select 
        [items]="ratesList" 
        bindLabel="ratetypename" 
        placeholder="Select Rate" 
        [clearable]="false" 
        formControlName="ratetype" 
        [ngClass]="{ 'is-invalid': submitted && detail.get('ratetype').errors }" 
        (change)="rateTypeChanged(detail.value)">
      </ng-select>
      <div *ngIf="submitted && detail.get('ratetype').errors" class="invalid-feedback">
        <div *ngIf="detail.get('ratetype').errors.required">Rate is required</div>
      </div>
    </td>
    <!-- 剩余字段保持formControlName不变，注意去掉重复的id属性（比如多个id="uom"） -->
    <td>
      <input type="text" formControlName="startquantity" class="form-control" placeholder="Start Quantity">
    </td>
    <td>
      <input type="text" formControlName="endquantity" class="form-control" placeholder="End Quantity">
    </td>
    <td>
      <input type="number" formControlName="fixedcost" class="form-control" placeholder="Enter Fixed Cost">
    </td>
    <td>
      <input type="text" formControlName="margintype" class="form-control" placeholder="Enter margin type">
    </td>
    <td>
      <input type="text" formControlName="marginvalue" class="form-control" placeholder="Enter margin value">
    </td>
    <td>
      <input type="text" formControlName="billingcycle" class="form-control" placeholder="Enter billing cycle">
    </td>
    <td>
      <input type="text" formControlName="remark" class="form-control" placeholder="Enter remark">
    </td>
  </tr>
</tbody>

注意：

• 移除重复的id属性，表单绑定不需要依赖id，且页面id必须唯一
• 把模板中未定义的f变量替换为detail，通过detail.get('控件名')获取当前行控件的状态

第三步：修复rateTypeChanged方法 #

原来的方法获取的是整个表单的值，现在修改为接收当前行的数据，适配行级操作：

rateTypeChanged(rowValue: any){
  console.log('当前行的Rate Type:', rowValue.ratetype);
  // 若需全局保存当前选中值，可根据业务逻辑调整
  // this.rateType = rowValue.ratetype;
}

第四步：加载现有数据到FormArray（可选） #

如果contractDetails存在已有数据，需要将数据填充到FormArray中，修改获取数据的subscribe逻辑：

this.Contract.getContractDetails(contractId).subscribe(
  data=> {
    this.contractDetails = data;
    console.log('this.contractDetails', this.contractDetails);
    const detailsArray = this.contractDetailsForm.get('details') as FormArray;
    detailsArray.clear(); // 清空默认的一行
    if(!this.contractDetails.length){
      // 数据为空时添加5行默认行
      this.addInitialRows()
    } else {
      // 有数据时循环生成表单组并填充值
      this.contractDetails.forEach(item => {
        const group = this.addDetailsGroupToForm();
        group.patchValue(item);
        detailsArray.push(group);
      });
    }
  });

验证效果 #

完成以上修改后：

1. 点击添加按钮会新增包含所有控件的完整行
2. 所有输入框、下拉框都会正确绑定到FormArray对应的表单组
3. 表单验证规则会正常生效
4. 提交表单时，onSubmit中的values会正确输出所有行的输入数据

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