Angular响应式表单自定义验证：限制复选框选中数量（1-3个）

我来帮你搞定这个复选框数量限制的验证需求！咱们一步步来实现：

第一步：创建自定义验证器函数 #

首先，我们需要写一个验证器函数，用来检查FormArray中被选中的复选框数量是否在1到3之间。这个函数接收一个AbstractControl（这里就是我们的FormArray），验证不通过时返回包含错误信息的对象，验证通过则返回null。

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

export function checkboxRangeValidator(min: number, max: number) {
  return (control: AbstractControl): ValidationErrors | null => {
    const formArray = control as AbstractControl[];
    // 统计选中的复选框数量
    const checkedCount = formArray.filter(ctrl => ctrl.value).length;
    
    if (checkedCount < min || checkedCount > max) {
      return { 
        checkboxRange: { 
          requiredMin: min, 
          requiredMax: max, 
          current: checkedCount 
        } 
      };
    }
    return null;
  };
}

第二步：在组件中配置表单并应用验证器 #

接下来，在组件类里初始化FormGroup时，把这个验证器加到存放复选框的FormArray上。这里我假设你的水果列表是一个示例数组，你可以根据实际情况替换：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
import { checkboxRangeValidator } from './checkbox-range.validator'; // 可将验证器单独存入文件，也可直接写在组件内

@Component({
  selector: 'app-fruit-selector',
  templateUrl: './fruit-selector.component.html',
  styleUrls: ['./fruit-selector.component.css']
})
export class FruitSelectorComponent implements OnInit {
  myForm: FormGroup;
  fruits = ['苹果', '香蕉', '橙子', '草莓', '芒果']; // 示例水果列表

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    // 为每个水果创建一个FormControl，初始值为未选中
    const answerControls = this.fruits.map(() => this.fb.control(false));
    
    this.myForm = this.fb.group({
      answers: this.fb.array(answerControls, checkboxRangeValidator(1, 3)) // 这里应用自定义验证器
    });
  }

  // 定义getter方便模板中获取FormArray
  get answers(): FormArray {
    return this.myForm.get('answers') as FormArray;
  }

  onSubmit(formValue: any) {
    // 处理提交逻辑，筛选出选中的水果
    const selectedFruits = formValue.answers
      .map((checked: boolean, index: number) => checked ? this.fruits[index] : null)
      .filter(fruit => fruit !== null);
    console.log('你选中的水果：', selectedFruits);
  }
}

第三步：在模板中添加错误提示 #

最后，我们可以在模板里加上验证错误的提示，让用户清晰知道选中数量不符合要求：

<div>
  <h3>你最喜欢哪3种水果？</h3>
  <form *ngIf="myForm" [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)" novalidate>
    <div *ngFor="let answer of answers.controls; let i=index">
      <input type="checkbox" [formControl]="answer">{{fruits[i]}}<br>
    </div>
    <!-- 显示验证错误信息 -->
    <div *ngIf="answers.hasError('checkboxRange')" style="color: #dc3545; margin: 8px 0;">
      请选择最少 {{answers.getError('checkboxRange').requiredMin}} 个、最多 {{answers.getError('checkboxRange').requiredMax}} 个水果，当前已选 {{answers.getError('checkboxRange').current}} 个
    </div>
    <button type="submit" [disabled]="!myForm.valid">Submit</button>
  </form>
</div>

这样配置后，当用户选中的水果数量不在1-3之间时，表单会处于无效状态，提交按钮被禁用，同时页面会显示明确的错误提示，引导用户调整选中数量。

内容的提问来源于stack exchange，提问作者Herman Fransen