在Angular中如何使用FormGroup和FormBuilder來處理復雜的嵌套表單結構

在Angular中，可以使用FormGroup和FormBuilder來處理復雜的嵌套表單結構。首先，需要導入ReactiveFormsModule模塊，并注入FormBuilder服務。

接下來，可以通過FormBuilder來創建FormGroup對象，然后在FormGroup中嵌套其他的FormGroup或FormControl。例如，假設有一個包含多個地址的表單，每個地址包含地址行1、地址行2、城市和郵政編碼字段，可以按照以下方式創建嵌套的表單結構：

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

@Component({
  selector: 'app-address-form',
  templateUrl: './address-form.component.html',
  styleUrls: ['./address-form.component.css']
})
export class AddressFormComponent implements OnInit {
  addressForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.addressForm = this.fb.group({
      addresses: this.fb.array([
        this.createAddress()
      ])
    });
  }

  createAddress(): FormGroup {
    return this.fb.group({
      addressLine1: ['', Validators.required],
      addressLine2: [''],
      city: ['', Validators.required],
      postalCode: ['', Validators.required]
    });
  }

  addAddress(): void {
    const addresses = this.addressForm.get('addresses') as FormArray;
    addresses.push(this.createAddress());
  }

  removeAddress(index: number): void {
    const addresses = this.addressForm.get('addresses') as FormArray;
    addresses.removeAt(index);
  }

}

在模板文件中，可以通過嵌套的FormGroup和FormArray來渲染表單控件：

<form [formGroup]="addressForm">
  <div formArrayName="addresses">
    <div *ngFor="let address of addressForm.get('addresses').controls; let i = index">
      <div [formGroupName]="i">
        <input formControlName="addressLine1" placeholder="Address Line 1">
        <input formControlName="addressLine2" placeholder="Address Line 2">
        <input formControlName="city" placeholder="City">
        <input formControlName="postalCode" placeholder="Postal Code">
        <button type="button" (click)="removeAddress(i)">Remove Address</button>
      </div>
    </div>
  </div>
  <button type="button" (click)="addAddress()">Add Address</button>
</form>

通過以上方法，可以使用FormGroup和FormBuilder來處理復雜的嵌套表單結構，并實現動態添加、刪除表單字段的功能。