使用 FormControl 在 Angular 中需要动态集

在 Angular 应用程序中，要使用表单控件，你需要使用表单模块中的 FormControl。它提供了一种容易管理表单控件值和状态的方式。但是在某些情况下，你需要动态创建 FormControl，以便能够添加和删除控件。在本文中，我们将了解如何在 Angular 应用程序中使用动态集来使用 FormControl。

创建 FormBuilder

首先，我们需要创建一个 FormBuilder 实例。它为我们提供了一种快捷方式来创建表单控件。我们可以通过注入 FormBuilder 来创建它。

import { FormBuilder } from '@angular/forms';
...
constructor(private fb: FormBuilder) {}

使用 FormBuilder 创建 FormControl

接下来，我们可以使用 FormBuilder 的 group 方法来创建 FormGroup 和控件。但是如果我们在运行时动态创建控件，我们可以使用 FormControl。这里是一个例子，我们将通过在点击按钮时添加控件，动态地创建 FormControl。

<form [formGroup]="form">
  <div *ngFor="let control of formControls">
    <input [formControl]="control">
  </div>
  <button (click)="addControl()">Add Control</button>
</form>

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

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

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({});
  }

  addControl() {
    const control = new FormControl();
    this.form.addControl(`control${this.formControls.length + 1}`, control);
    this.formControls.push(control);
  }
}

在这个例子中，我们创建了一个空的 FormGroup，并将其绑定到表单元素上。我们还有一个 formControls 数组，它用于存储每个动态创建的 FormControl。当点击按钮时，我们使用 new FormControl() 创建新的控件。我们将控件添加到 FormGroup，并将其添加到 formControls 数组中。此时，控件就可以通过 UI 进行交互了。

示例

我们提供了一个在线示例，可以让你体验动态创建 FormControl。

在线示例

总结

Angular 的表单系统是强大的，但有时你需要动态创建控件。这就是 FormControl 派上用场的时候。使用它创建 FormControl 是很容易的，你只需要使用 new FormControl() 即可创建控件。一旦你创建了一个控件，就可以将其添加到 FormGroup 中，并使用它在表单中进行交互。