如何使用Angular FormBuilder验证多个动态复选框？

核心问题分析 #

1. 多个复选框绑定同一formControlName错误：每个复选框都绑定到movies控件，会导致勾选状态被覆盖，无法正确追踪所有选中项。
2. Validators.required不适用：该验证器仅检查控件是否存在值，空数组属于“有效值”，无法满足“至少选一个”的要求。

修复方案 #

步骤1：自定义验证器

创建验证器函数，检查选中项数组的长度是否大于0：

import { ValidatorFn, AbstractControl } from '@angular/forms';

// 自定义验证器：至少选中一个选项
export function atLeastOneSelected(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const selectedItems = control.value;
    return (selectedItems && selectedItems.length > 0) ? null : { 'noSelection': true };
  };
}

步骤2：修改组件逻辑

调整表单初始化，绑定选中数组并应用自定义验证器，同步选中状态与表单控件：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { SelectionModel } from '@angular/cdk/collections';

@Component({
  // 组件元数据
})
export class YourComponent {
  movies: any[] = [{title: 'titanic', year: 2013}, {title: 'matrix', year: 2002}];
  selectedMovies = new SelectionModel<any>(true, []);
  moviesForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    // 初始化表单，应用自定义验证器
    this.moviesForm = this.formBuilder.group({
      movies: [[], atLeastOneSelected()]
    });
  }

  // 切换电影选中状态并同步表单
  toggleMovieSelection(movie: any) {
    this.selectedMovies.toggle(movie);
    // 更新表单控件值为当前选中的所有项
    this.moviesForm.get('movies')?.setValue(this.selectedMovies.selected);
  }
}

步骤3：调整模板代码

移除每个复选框的formControlName，绑定选中状态到SelectionModel，并添加错误提示：

<div [formGroup]="moviesForm">
  <mat-checkbox
    *ngFor="let movie of movies"
    [checked]="selectedMovies.isSelected(movie)"
    (change)="toggleMovieSelection(movie)"
  >
    <div>{{ movie.title }}</div>
  </mat-checkbox>

  <!-- 验证错误提示 -->
  <div *ngIf="moviesForm.get('movies')?.hasError('noSelection') && moviesForm.get('movies')?.touched">
    至少需要选择一部电影
  </div>
</div>

关键说明 #

• 取消勾选后，selectedMovies.selected会自动更新，通过setValue同步到表单控件，触发自定义验证器检查数组长度。
• 自定义验证器会在数组为空时返回noSelection错误，此时表单状态变为无效。

内容的提问来源于stack exchange，提问作者Żegota