使用Angular响应式表单跨字段校验时如何对所有表单项强制必填校验

你的表单异常生效的核心原因有两点：

• FormControl 初始值设置错误，未选择的下拉框对应的控件初始值为{ key: undefined }非空对象，导致Validators.required直接判定为校验通过，Angular 原生规则下只要所有子控件有效，FormGroup 就会被标记为有效
• 跨字段校验器逻辑存在边界漏洞，只判断了第二个匹配控件为空的场景，未做兜底处理

1. 修正动态表单控件初始化逻辑 #

调整初始值赋值规则，确保没有默认值的控件初始值为null，触发必填校验：

questions.forEach(question => {
  question.questions.forEach(child => {
    // 只有存在有效值时才赋值对象，否则设为null触发必填校验
    const initialVal = child.value ? { key: child.value } : null;
    group[child.key] = new FormControl(initialVal, Validators.required);
  });
});

2. 优化跨字段自定义校验器逻辑 #

补全边界判断，避免异常返回，同时兼容空值场景下由控件自身的必填校验负责：

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

export function compareValues(val1: string, val2: string, message: string): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const mustMatch1 = control.get(val1);
    const mustMatch2 = control.get(val2);
    
    // 控件不存在时兜底返回校验通过
    if (!mustMatch1 || !mustMatch2) return null;
    // 任意一个控件未填写时，不触发匹配校验，交由控件自身的required规则处理
    if (mustMatch1.value === null || mustMatch2.value === null) return null;
    // 两个控件都填写后才校验值是否一致
    return mustMatch1.value.key === mustMatch2.value.key ? null : { mustMatch: true, message: message }
  };
}

3. 可选：新增全局表单校验规则 #

如果需要额外兜底确保所有字段都填写，可以新增通用的全控件校验器，添加到FormGroup的校验数组中：

// 新增通用全局校验器
export function allFieldsValid(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const formGroup = control as FormGroup;
    const invalidList = Object.keys(formGroup.controls).filter(key => formGroup.controls[key].invalid);
    return invalidList.length ? { hasInvalidFields: true, invalidFields: invalidList } : null;
  };
}

// 表单初始化时添加校验器
return new FormGroup(group, [
  compareValues('26', '27', 'Questions 4 and 5 must have the same answer.'),
  allFieldsValid()
]);

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