Angular9中如何为formBuilder数组生成的复选框添加校验规则

针对FormArray格式的复选框组，需要自定义校验器实现至少选中一项的校验规则，具体实现步骤如下：

• 第一步：编写自定义校验函数

// 需提前从 @angular/forms 导入 AbstractControl、ValidationErrors、FormArray 类型
function requireAtLeastOneChecked(control: AbstractControl): ValidationErrors | null {
  const checkArray = control as FormArray;
  // 检查是否存在至少一个选中（值为true）的项
  const hasValidSelected = checkArray.controls.some(ctrl => ctrl.value === true);
  return hasValidSelected ? null : { atLeastOneRequired: true };
}

• 第二步：将校验器绑定到viewport的FormArray上
  修改你的createForm方法，给viewport的FormArray添加校验规则：

public createForm(): FormGroup {
    return this.formBuilder.group({
        urlInput: ['', [ Validators.required, Validators.pattern(URL_VALIDATOR) ]],
        children: [false, []],
        // 第二个参数为FormArray的校验器配置
        viewport: this.formBuilder.array(this.viewports.map(x => false), [requireAtLeastOneChecked])
    });
}

• 第三步：模板中添加错误提示（可选）
  如果需要在页面显示校验失败提示，可参考如下代码：

<!-- 当viewport校验失败且被触碰过的时候显示错误 -->
<span *ngIf="urlForm.get('viewport')?.invalid && urlForm.get('viewport')?.touched" class="error-text">
  请至少选择一个viewport
</span>

配置完成后，勾选/取消复选框时会自动触发校验，整个表单的valid状态会同步更新，不需要额外添加事件监听逻辑。

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