Angular11响应式表单自定义校验器实现密码与确认密码匹配校验的问题解决

这两个连锁问题的本质是Angular响应式表单跨字段自定义校验的两个典型实现误区：

• 直接在校验逻辑中写control.get('password').value触发控制台空引用报错，分两种场景：如果校验器挂载位置正确，校验执行时机早于所有子控件完成初始化的节点，此时control.get('password')可能返回null，强行访问.value属性就会抛出读取空值属性的错误；如果是校验器挂载在单个子控件上，控制台会直接提示control.get is not a function，因为单个FormControl本身没有提供get()方法来查找同组的其他控件
• 移除.value后不再报错但校验失效，本质是两层逻辑错位：一是拿FormControl实例本身做对象引用比对，永远不会匹配相等的实际输入值；二是如果校验器挂载在单个确认密码的FormControl上，control本身不具备访问同组其他字段的能力，自然不会触发有效校验逻辑

1. 调整校验器挂载位置
   跨字段比对类的校验不能挂载在单个确认密码控件上，必须挂载在承载密码、确认密码两个字段的父级FormGroup上，只有父级表单组才有权限访问组内所有子控件的引用。
2. 编写带空值防御的自定义校验器
   校验器内部先做空值兜底判断，从根源避免初始化阶段的空引用报错，正确的实现示例：

   import { ValidatorFn, FormGroup, ValidationErrors } from '@angular/forms';
   
   export const passwordMatchValidator: ValidatorFn = (formGroup: FormGroup): ValidationErrors | null => {
     // 两个关联控件任意不存在时，直接返回null跳过校验
     const passwordControl = formGroup.get('password');
     const confirmControl = formGroup.get('confirmPassword');
     if (!passwordControl || !confirmControl) {
       return null;
     }
     // 两个控件都有效时，再取值做一致性比对
     return passwordControl.value === confirmControl.value 
       ? null 
       : { passwordMismatch: true };
   };
   

3. 正确关联校验器到表单组
   构建响应式表单时，将自定义校验器作为FormGroup的顶层校验规则传入，不要挂在单个子控件上：

   this.resetPasswordForm = this.fb.group({
     password: ['', [Validators.required, Validators.minLength(6)]],
     confirmPassword: ['', [Validators.required]]
   }, {
     // 顶层校验规则传入自定义校验器
     validators: [passwordMatchValidator]
   });
   

• 模板展示校验错误时，要注意错误的存储位置：跨字段的passwordMismatch错误是存在父级FormGroup上，不是存在单个确认密码控件上，取值判断时不要错误地从confirmPassword控件上取这个错误标识
• 不要在比对逻辑里强制要求两个值非空才做校验：只要两个字段的实际值不匹配，就应该触发校验提示，空值场景可以由自带的Validators.required单独覆盖，避免逻辑混杂
• 上述实现完全兼容Angular 11版本的API规范，不会出现版本适配问题

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