Angular 13自定义FormGroup校验器报AbstractControl.parent可能为null

问题复现 #

• 业务需求：表单内复选框组强制用户至少选中1项
• 表单结构：
  • 顶层FormGroup包含customer、partTimeidentification等必填基础控件
  • 嵌套inspectionType表单组：内置ocr、anomalyDetection、metrics、wiresInspection、other5个默认值为false的复选框控件，挂载自定义atLeastOneValidator()校验器
  • 同级存在cameraSettings嵌套表单组
• 模板逻辑：通过[formGroup]绑定顶层表单实例，用formGroupName="inspectionType"绑定复选框组，提交按钮disabled属性绑定!form.valid控制提交权限
• 原校验器实现：ValidatorFn类型函数，逻辑为访问group.parent.controls遍历检查是否存在值不为false的控件，存在则返回null（校验通过），否则返回atLeastOneRequired错误
• 编译报错：error TS2531: Object is possibly 'null'，报错位置指向校验器内的group.parent属性
• 预期目标：校验器直接校验挂载的inspectionType表单组，检查组内是否有任意复选框被勾选（值为true），满足条件则校验通过

错误原因 #

1. 逻辑层级错误：校验器挂载在inspectionType表单组上时，函数入参本身就是inspectionType的FormGroup实例，访问parent会拿到顶层表单组，遍历范围错误，包含了无关的其他表单控件
2. TS类型校验拦截：Angular AbstractControl的parent属性类型定义为FormGroup | null，未做非空判断直接访问属性会触发严格模式下的TS2531编译错误

修复实现 #

1. 修正自定义校验器代码 #

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

export function atLeastOneValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: boolean } | null => {
    // 类型守卫，确认当前控件为FormGroup实例，避免类型错误
    if (!(control instanceof FormGroup)) {
      return null;
    }
    // 直接遍历当前FormGroup下的所有子控件，判断是否存在勾选值
    const hasSelected = Object.values(control.controls).some(item => item.value === true);
    return hasSelected ? null : { atLeastOneRequired: true };
  };
}

2. 校验器挂载方式（无需改动原有模板） #

// form.component.ts 中定义inspectionType表单组时挂载校验器
inspectionType: this.fb.group({
  ocr: [false],
  anomalyDetection: [false],
  metrics: [false],
  wiresInspection: [false],
  other: [false]
}, { validators: atLeastOneValidator() })

修复点说明 #

• 移除错误的parent访问逻辑，直接操作当前挂载校验器的inspectionType表单组实例，遍历范围精准
• 增加instanceof类型判断，既符合TS严格类型校验要求，也避免校验器被错误挂载到非FormGroup控件上的运行时错误
• 校验逻辑直接判断控件值是否严格等于true，比判断“值不为false”更严谨，规避控件值为null/undefined时的误判

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