如何在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来动态添加或删除表单控件。