如何在Angular中使用FormArray來動態添加或刪除表單控件

在Angular中，可以使用FormArray來動態添加或刪除表單控件。以下是一個簡單的示例，展示如何使用FormArray來實現動態添加或刪除表單控件：

首先，創建一個包含FormArray的FormGroup，并在組件中初始化：

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

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

  constructor() {
    this.form = new FormGroup({
      items: new FormArray([])
    });
  }

  get items() {
    return (this.form.get('items') as FormArray);
  }

  addItem() {
    this.items.push(new FormControl(''));
  }

  removeItem(index: number) {
    this.items.removeAt(index);
  }
}

然后，在模板中使用FormArray來動態添加或刪除表單控件：

<form [formGroup]="form">
  <div formArrayName="items">
    <div *ngFor="let item of items.controls; let i = index;">
      <input [formControlName]="i">
      <button (click)="removeItem(i)">Remove Item</button>
    </div>
  </div>
  <button (click)="addItem()">Add Item</button>
</form>

在上面的示例中，當用戶點擊“Add Item”按鈕時，會調用addItem()方法向FormArray中添加一個新的FormControl。當用戶點擊“Remove Item”按鈕時，會調用removeItem()方法從FormArray中刪除對應的FormControl。

通過這種方式，您可以輕松實現在Angular中使用FormArray來動態添加或刪除表單控件。