如何使用angular 9中的formBuilder数组为复选框创建验证器？

在Angular 9中，可以使用FormBuilder数组为复选框创建验证器。下面是一个完善且全面的答案：

在Angular中，FormBuilder是一个用于创建和管理表单的工具。要为复选框创建验证器，首先需要导入FormBuilder和Validators模块：

import { FormBuilder, Validators } from '@angular/forms';

然后，在组件类中使用FormBuilder来创建表单并添加验证器。假设我们有一个复选框列表，可以选择多个选项。我们想要验证至少选择一个选项。可以按照以下步骤进行操作：

在组件类中创建一个表单变量：

myForm: FormGroup;

在组件的构造函数中初始化表单变量，并使用FormBuilder创建表单：

constructor(private formBuilder: FormBuilder) {
  this.myForm = this.formBuilder.group({
    options: this.formBuilder.array([], Validators.required)
  });
}

在上面的代码中，我们使用formBuilder.group()方法创建一个表单组，并在其中创建一个名为"options"的表单控件数组。我们将Validators.required作为验证器传递给该数组，以确保至少选择一个选项。

在模板中使用formBuilder数组创建复选框：

<form [formGroup]="myForm">
  <div formArrayName="options">
    <label *ngFor="let option of myForm.get('options').controls; let i = index">
      <input type="checkbox" [formControlName]="i"> {{ option.value }}
    </label>
  </div>
  <div *ngIf="myForm.get('options').invalid && myForm.get('options').touched">
    请至少选择一个选项。
  </div>
</form>

在上面的代码中，我们使用formArrayName指令将表单控件数组绑定到模板中的div元素。然后，使用*ngFor指令遍历表单控件数组，并为每个选项创建一个复选框。我们使用formControlName指令将复选框绑定到表单控件数组中的特定位置。

最后，我们使用*ngIf指令检查表单控件数组是否无效并且已经触摸过。如果是，则显示一条错误消息。

这样，我们就成功地为复选框创建了验证器。当用户未选择任何选项时，表单将被标记为无效，并显示错误消息。

推荐的腾讯云相关产品和产品介绍链接地址：