Angular 15表单两字段相等验证问题：取值始终为null

问题场景 #

我在Angular 15中尝试验证表单内的两个字段（比如密码和确认密码）是否相等，要求二者值不相等时表单失效。我编写了自定义验证器并在组件中使用，但验证器里获取两个字段值的代码始终返回null，尽管console.log显示这两个字段确实存在于FormGroup中。

我的代码 #

自定义验证器 #

export function matchFields(firstControl: string, secondControl: string): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    
    const firstValue = control.get(firstControl)?.value;
    const secondValue = control.get(secondControl)?.value;

    if(!firstValue) {
        console.error(`Cannot find control named: ${firstControl}. Please make sure it exists in your form.`);
        return null;
    }
    
    if(!secondValue) {
        console.error(`Cannot find control named: ${secondControl}. Please make sure it exists in your form.`);
        return null;
    }
    
    const result = (firstValue === secondValue);
    return result ? null : { matches: false };
  };
}

组件中使用验证器 #

public setPasswordForm = new FormGroup({
    password: new FormControl('', [Validators.required]),
    confirmPassword: new FormControl('', [Validators.required]),
});

constructor() {
    this.setPasswordForm.setValidators(matchFields('password', 'confirmPassword'));
}

核心问题 #

验证器中的以下两行代码始终返回null，这是为什么？

const firstValue = control.get(firstControl)?.value; // 始终返回null？原因是什么？
const secondValue = control.get(secondControl)?.value; // 始终返回null？原因是什么？

原因及解决办法 #

问题根源 #

你的判断逻辑混淆了控件不存在和字段值为空两种情况：空字符串在JavaScript中属于假值，表单初始化时两个字段都是空字符串，导致!firstValue和!secondValue被判定为true，直接触发错误日志并返回null，让你误以为是control.get()获取不到控件值。实际上control.get()是能正确拿到子控件的，只是你的错误逻辑掩盖了真实情况。

修正后的验证器 #

export function matchFields(firstControl: string, secondControl: string): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    // 先校验控件是否存在
    const firstCtrl = control.get(firstControl);
    const secondCtrl = control.get(secondControl);

    if (!firstCtrl) {
        console.error(`找不到名为${firstControl}的控件，请确认它存在于表单中。`);
        return null;
    }
    
    if (!secondCtrl) {
        console.error(`找不到名为${secondControl}的控件，请确认它存在于表单中。`);
        return null;
    }

    // 再获取字段值并判断是否相等
    const firstValue = firstCtrl.value;
    const secondValue = secondCtrl.value;

    // 如果需要在字段未填写时不触发匹配验证，保留此判断
    if (!firstValue || !secondValue) {
        return null;
    }

    return firstValue === secondValue ? null : { matches: false };
  };
}

额外优化建议 #

1. 保留原有验证器：setValidators()会替换FormGroup的所有原有验证器，若需保留其他验证逻辑，改用addValidators()：

constructor() {
    this.setPasswordForm.addValidators(matchFields('password', 'confirmPassword'));
}

2. 确保验证触发：Angular默认会在字段值变化时自动验证，若有特殊场景，可手动调用this.setPasswordForm.updateValueAndValidity()触发验证更新。

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