Angular响应式表单：正确创建FormArray嵌套FormGroup的方法

问题根源 #

你循环推入FormArray的是同一个FormGroup实例，所有数组元素共享同一内存引用，因此修改任意一项的表单值，其他项会同步变化。

解决方案 #

不要复用单个FormGroup实例，每次循环都创建新的FormGroup对象。推荐用工厂方法封装表单创建逻辑，保证每次调用都生成全新实例。

修正后的Component.ts代码 #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'app-consumption',
  templateUrl: './consumption.component.html',
  styleUrls: ['./consumption.component.css']
})
export class ConsumptionComponent implements OnInit {
  consumptionPerMonth: FormArray;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.consumptionPerMonth = this.fb.array([]);
    // 循环创建12个独立的FormGroup并推入数组
    for (let i = 0; i < 12; i++) {
      this.consumptionPerMonth.push(this.createConsumptionForm());
    }
  }

  // 表单工厂方法：每次返回全新的FormGroup实例
  private createConsumptionForm(): FormGroup {
    return this.fb.group({
      electricity: [0], // 默认值可按需调整
      water: [0]
    });
  }
}

对应的Component.html代码 #

<form [formGroup]="consumptionPerMonth">
  <div *ngFor="let consumptionForm of consumptionPerMonth.controls; let i = index" 
       [formGroup]="consumptionForm"
       class="month-item">
    <h4>第{{i+1}}月</h4>
    <label>电量：</label>
    <input type="number" formControlName="electricity">
    <label>水量：</label>
    <input type="number" formControlName="water">
  </div>
</form>

效果说明 #

修改后，每个月份的表单都是独立的FormGroup实例，内存引用互不关联，修改任意一行的输入值只会影响对应项的表单数据，不会同步到其他行。

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