在响应式表单(Reactive Form)中动态添加HTML表格行及合计行的实现咨询

方案1：模板层直接条件渲染（改动最小） #

不需要修改原有遍历逻辑，直接在原有ngFor循环结束后新增条件判断渲染合计行即可：

• 首先在组件类中新增两个getter，分别用于判断是否显示合计、计算合计值：

// 替换为你自己的formArray获取逻辑
get formArray() {
  return this.yourForm.get('itemList') as FormArray
}

// 判断是否满足显示合计的条件
get shouldShowTotal() {
  return this.formArray.length >= 2
}

// 计算合计值，字段替换为你实际要统计的表单字段即可
get totalData() {
  return this.formArray.controls.reduce((result, control) => {
    return {
      amount: result.amount + (control.get('amount')?.value || 0),
      count: result.count + (control.get('count')?.value || 0)
    }
  }, { amount: 0, count: 0 })
}

• 模板中表格的结构写法：

<table>
  <thead>
    <tr>
      <th>项目名称</th>
      <th>数量</th>
      <th>金额</th>
    </tr>
  </thead>
  <tbody>
    <!-- 原有遍历formArray渲染行的逻辑 -->
    <tr *ngFor="let item of formArray.controls" [formGroup]="item">
      <td><input formControlName="name"></td>
      <td><input formControlName="count"></td>
      <td><input formControlName="amount"></td>
    </tr>
    <!-- 新增合计行的条件渲染 -->
    <tr *ngIf="shouldShowTotal" class="total-row">
      <td>合计</td>
      <td>{{ totalData.count }}</td>
      <td>{{ totalData.amount }}</td>
    </tr>
  </tbody>
</table>

优点：完全不侵入原有表单数据结构，响应式自动更新，formArray值变化时合计会自动重算

方案2：合并遍历数据源（适合需统一处理全行逻辑的场景） #

如果你需要对所有行（包括合计行）做统一的事件绑定、样式判断，可以把原表单数组和合计项合并成一个新的展示数组：

• 组件类中定义展示用数组的getter：

get displayRows() {
  const originRows = this.formArray.controls
  if (originRows.length < 2) return originRows
  // 给合计行加特殊标识方便模板区分
  const totalRow = {
    isTotal: true,
    data: this.totalData
  }
  return [...originRows, totalRow]
}

• 模板中遍历合并后的数组，用条件判断区分普通行和合计行：

<tr *ngFor="let row of displayRows">
  <ng-container *ngIf="!row.isTotal; else totalTpl" [formGroup]="row">
    <td><input formControlName="name"></td>
    <td><input formControlName="count"></td>
    <td><input formControlName="amount"></td>
  </ng-container>
  <ng-template #totalTpl>
    <td>合计</td>
    <td>{{ row.data.count }}</td>
    <td>{{ row.data.amount }}</td>
  </ng-template>
</tr>

注意事项 #

• 合计计算优先用getter实现，不需要额外监听formArray.valueChanges事件，Angular变更检测会自动触发重算，常规场景下性能完全足够
• 不要把合计行加入formArray本身，避免影响原表单的校验、提交逻辑，需要提交合计值的话直接在提交参数里拼接totalData即可
• 如果涉及金额等精度敏感的计算，可在reduce计算时加入toFixed处理或者引入专门的数值计算库

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