如何确保嵌套表单组返回 Angular 中的对象数组？

Question

我正在 Angular 14 中处理带有嵌套表单组的表单。

在form.component.ts我有：

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css'],
})
export class FormComponent {
  public form: FormGroup = new FormGroup({
    first_name: new FormControl('', Validators.required),
    last_name: new FormControl('', Validators.required),
    email: new FormControl('', [Validators.required, Validators.email]),
    phone: new FormControl('', Validators.required),

    residences: new FormGroup({
      city: new FormControl(''),
      address: new FormControl(''),
    }),
  });

  constructor() {}

  ngOnInit(): void {}

  public sendFormData() {
    console.log(this.form.value);
  }
}

请参阅此处的Stackblitz 。

问题

我需要residences是一个对象数组。 相反，它本身就是一个 object 。

我该如何解决这个问题？

Answer 1

创建一个表单数组：

  public form: FormGroup = new FormGroup({
    first_name: new FormControl('', Validators.required),
    last_name: new FormControl('', Validators.required),
    email: new FormControl('', [Validators.required, Validators.email]),
    phone: new FormControl('', Validators.required),

    residences: new FormArray([
      new FormGroup({
        city: new FormControl(''),
        address: new FormControl(''),
      }),
    ]),
  });

  get residencesArray(): FormArray {
    return this.form.get('residences') as FormArray;
  }

在模板中：

  <div
    formArrayName="residences"
    *ngFor="let residence of residencesArray.controls; let i = index"
  >
    Residence {{ i + 1 }}
    <div [formGroupName]="i">
      <mat-form-field appearance="outline" floatLabel="always">
        <mat-label class="mat-label">City:</mat-label>
        <input class="mat-input" matInput formControlName="city" />
      </mat-form-field>

      <mat-form-field appearance="outline" floatLabel="always">
        <mat-label class="mat-label">Address:</mat-label>
        <input class="mat-input" matInput formControlName="address" />
      </mat-form-field>
    </div>
  </div>

StackBlitz 在这里