Ionic 3表单验证：实现至少勾选一个复选框的需求

你遇到的问题其实是两个细节失误导致的：

1. Validators.requiredTrue的误用：这个验证器是专门用来校验单个布尔控件（比如单个复选框、单选框）的值是否为true的，但你的period是一个包含三个控件的表单组，它的返回值是一个对象（比如{morning: false, afternoon: false, night: false}），和验证器期望的布尔值完全不匹配，自然起不到作用。
2. 表单组验证器的写法错误：formBuilder.group的第二个参数需要传入一个配置对象（包含validators属性），但你直接传了验证器函数，导致这条验证规则根本没被应用到period组上，所以表单默认处于valid状态，提交按钮也就默认启用了。

我们需要针对性地修复这两个问题，具体步骤如下：

步骤1：编写自定义验证器 #

在你的组件类中添加一个自定义验证器函数，用来检查表单组里至少有一个复选框被勾选：

// 自定义验证器：确保至少勾选一个时段复选框
private atLeastOneCheckboxChecked(group: FormGroup): { [key: string]: any } | null {
  // 遍历表单组的所有控件，判断是否有值为true的选项
  const hasCheckedOption = Object.values(group.controls).some(control => control.value === true);
  // 有勾选则返回null（验证通过），否则返回错误标识
  return hasCheckedOption ? null : { atLeastOneRequired: true };
}

步骤2：正确配置表单验证规则 #

修改表单构建代码，把自定义验证器通过配置对象绑定到period表单组上：

constructor(private formBuilder: FormBuilder) {
  this.bookingForm = this.formBuilder.group({
    // ... 你的其他表单字段 ...
    period: this.formBuilder.group(
      {
        morning: false,
        afternoon: false,
        night: false
      },
      { 
        validators: this.atLeastOneCheckboxChecked // 正确传入验证器
      }
    )
  });
}

可选：添加错误提示（提升用户体验） #

如果需要在模板中给用户显示错误提示，可以在复选框组下方添加这段代码：

<ion-item *ngIf="bookingForm.get('period').hasError('atLeastOneRequired') && bookingForm.get('period').touched">
  <ion-label color="danger">请至少选择一个时段</ion-label>
</ion-item>

这样修改后，当用户没有勾选任何复选框时，period表单组会处于invalid状态，整个bookingForm也会随之失效，提交按钮就会被禁用，完全符合你的需求！

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