Angular - 反应式表单：在 FormArray 中使用 FormGroup 的正确方法

Question

在 Angular 中创建 FormGroup 的 FormArray 的正确方法是什么？

我有以下内容：

组件.ts：

export class DrawerContentComponent implements OnInit {
  consumption = new FormGroup({
    electricity: new FormControl(0),
    water: new FormControl(0),
    gas: new FormControl(0),
  });

  consumptionPerMonth = new FormArray([]);

  ngOnInit() {
    for (let index = 0; index < 12; index++) {
      this.consumptionPerMonth.push(this.consumption);
    }
  }

  showYearlyConsumption() {
    console.log(this.consumptionPerMonth.value);
  }
}

组件.html：

<table>
  <tr>
    <th>Monat</th>
    <th class="w-40">Stromverbrauch in kWh</th>
    <th class="w-40">Wasserverbrauch in m&#179;</th>
    <th class="w-40">Gasverbrauch in kWh</th>
  </tr>

  <tr *ngFor="let month of consumptionPerMonth.controls; let i = index">
    <ng-container [formGroup]="month">
      <td>{{ i }}</td>
      <td>
        <input
          class="border"
          type="number"
          [formControl]="month.controls.electricity"
        />
      </td>
      <td>
        <input
          class="border"
          type="number"
          [formControl]="month.controls.water"
        />
      </td>
      <td>
        <input
          class="border"
          type="number"
          [formControl]="month.controls.gas"
        />
      </td>
    </ng-container>
  </tr>
</table>
<button (click)="showYearlyConsumption()">show</button>

例如，当我在网站上第一行的第一列填写 1 时， 像这样：

然后单击“显示”按钮 然后我在所有 12 个项目的 console.log(this.conspirationPerMonth.value) 中都有“electricity”的值 = 1

像这样：

console.log(this.consumationPerMonth.value):

(12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0
: 
{electricity: 1, water: 0, gas: 0}
1
: 
{electricity: 1, water: 0, gas: 0}
2
: 
{electricity: 1, water: 0, gas: 0}
3
: 
{electricity: 1, water: 0, gas: 0}
4
: 
{electricity: 1, water: 0, gas: 0}
5
: 
{electricity: 1, water: 0, gas: 0}
6
: 
{electricity: 1, water: 0, gas: 0}
7
: 
{electricity: 1, water: 0, gas: 0}
8
: 
{electricity: 1, water: 0, gas: 0}
9
: 
{electricity: 1, water: 0, gas: 0}
10
: 
{electricity: 1, water: 0, gas: 0}
11
: 
{electricity: 1, water: 0, gas: 0}
length
: 
12
[[Prototype]]
: 
Array(0)

执行此操作的正确方法是什么，我仅在第一项中的“this.conspirationPerMonth.value”中使用 1 表示“电力”？

Answer 1

我看到你的代码中唯一的一个问题。您将

FormGroup

的相同实例推送到

FormArray

，但需要不同的表单组，因此解决问题的最简单方法就是在循环内创建新的

FormGroup

。另外，为了更好的可读性，您可以将其移动到单独的函数中，这样结果将是下一个：

export class DrawerContentComponent implements OnInit {
  consumptionPerMonth = new FormArray([]);

  ngOnInit() {
    for (let index = 0; index < 12; index++) {
      this.consumptionPerMonth.push(this._createConsumptionFormGroup());
    }
  }

  showYearlyConsumption() {
    console.log(this.consumptionPerMonth.value);
  }

  private _createConsumptionFormGroup(): FormGroup {
      return new FormGroup({
        electricity: new FormControl(0),
        water: new FormControl(0),
        gas: new FormControl(0),
      });
    }
}