Angular 14+实现复选框组至少选一个时启用提交按钮的方法

方案一：最简单的手动监听实现（无需验证器） #

这种方式直接监听复选框组的值变化，更新按钮禁用状态，代码改动最小：

修改TypeScript代码 #

1. 移除setSubmit方法，在组件的ngOnInit中添加值变化订阅：

import { OnInit } from '@angular/core';
// ... 其他必要导入

export class YourComponent implements OnInit {
  checkboxSelected = false;

  driverForm = new FormGroup({
    // 其他表单控件...
    categoryLicense: new FormGroup({
      A1: new FormControl(false),
      A2: new FormControl(false),
      A: new FormControl(false),
      B1: new FormControl(false),
      B: new FormControl(false),
      BE: new FormControl(false),
      C1: new FormControl(false),
      C1E: new FormControl(false),
      C: new FormControl(false),
      CE: new FormControl(false),
      D1: new FormControl(false),
      D1E: new FormControl(false),
      D: new FormControl(false),
      DE: new FormControl(false),
    }),
  });

  ngOnInit(): void {
    // 监听驾照类别组的值变化
    this.driverForm.get('categoryLicense').valueChanges.subscribe(values => {
      // 检查是否至少有一个复选框被选中
      this.checkboxSelected = Object.values(values).some(val => val === true);
    });
  }

  onSubmit() {
    // 提交逻辑
  }
}

2. 修改HTML代码，移除每个复选框的(input)事件绑定：

<form [formGroup]="driverForm" (ngSubmit)="onSubmit()">
  <div formGroupName="categoryLicense">
    <label for="A1">A1</label>
    <input id="A1" type="checkbox" formControlName="A1" />

    <label for="A2">A2</label>
    <input id="A2" type="checkbox" formControlName="A2" />

    <label for="A">A</label>
    <input id="A" type="checkbox" formControlName="A" />

    <!-- 其他复选框... -->
  </div>

  <button type="submit" [disabled]="!checkboxSelected">Submit</button>
</form>

方案二：使用Angular表单验证器（更规范的实现） #

如果需要和表单其他验证规则结合，推荐使用自定义验证器，让表单自身管理验证状态：

步骤1：定义自定义验证器函数 #

在组件文件中添加验证器函数：

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

// 验证至少一个复选框被选中
function atLeastOneCheckboxSelected(control: FormGroup): ValidationErrors | null {
  const values = Object.values(control.value);
  const hasSelected = values.some(val => val === true);
  // 选中则返回null（验证通过），否则返回错误标记
  return hasSelected ? null : { noCheckboxSelected: true };
}

步骤2：为表单组添加验证器 #

修改driverForm的categoryLicense定义，加入验证器：

driverForm = new FormGroup({
  // 其他表单控件...
  categoryLicense: new FormGroup({
    A1: new FormControl(false),
    A2: new FormControl(false),
    A: new FormControl(false),
    B1: new FormControl(false),
    B: new FormControl(false),
    BE: new FormControl(false),
    C1: new FormControl(false),
    C1E: new FormControl(false),
    C: new FormControl(false),
    CE: new FormControl(false),
    D1: new FormControl(false),
    D1E: new FormControl(false),
    D: new FormControl(false),
    DE: new FormControl(false),
  }, { validators: atLeastOneCheckboxSelected }), // 绑定验证器
});

步骤3：修改HTML按钮的禁用逻辑 #

直接绑定表单组的验证状态，无需额外变量：

<form [formGroup]="driverForm" (ngSubmit)="onSubmit()">
  <div formGroupName="categoryLicense">
    <!-- 所有复选框代码不变，移除(input)事件 -->
  </div>

  <button type="submit" [disabled]="driverForm.get('categoryLicense').invalid">Submit</button>
</form>

可选：添加错误提示（如果需要） #

可以在模板中添加验证错误提示：

<div *ngIf="driverForm.get('categoryLicense').hasError('noCheckboxSelected')" class="error-message">
  请至少选择一个驾照类别
</div>

内容的提问来源于stack exchange，提问作者Vito Marseglia