基于另一字段值为表单FormControl字段设置校验错误的实现问题

• 你的自定义验证器绑定在passwordAgain单字段上，仅当passwordAgain自身值变动时才会触发校验。当你修改password字段内容时，不会自动触发passwordAgain的校验逻辑，导致校验规则不生效。
• 现有逻辑仅校验了确认密码是否为空，缺少两次密码输入一致性的校验。

1. 替换为FormGroup级交叉验证器 #

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

// 自定义密码校验规则
export function passwordValidator(): ValidatorFn {
  return (group: AbstractControl): ValidationErrors | null => {
    const password = group.get('password')?.value;
    const passwordAgain = group.get('passwordAgain')?.value;

    // 密码有输入时，确认密码必填
    if (password && !passwordAgain) {
      return { requiredPasswordAgain: true };
    }

    // 两次密码都有输入时，校验是否一致
    if (password && passwordAgain && password !== passwordAgain) {
      return { passwordMismatch: true };
    }

    return null;
  };
}

2. 修改FormGroup定义 #

把验证器绑定到FormGroup上，移除passwordAgain的单字段验证：

this.userForm = new FormGroup({
  username: new FormControl(this.data.user.username, [Validators.required]),
  firstName: new FormControl(this.data.user.firstName, [Validators.required]),
  email: new FormControl(this.data.user.email, [Validators.required, Validators.email]),
  password: new FormControl('', []),
  passwordAgain: new FormControl('', []),
}, { validators: passwordValidator() }); // 绑定表单级验证器

3. 页面错误提示示例 #

可根据表单的错误类型分别提示用户：

<!-- 确认密码为空提示 -->
<div *ngIf="userForm.hasError('requiredPasswordAgain') && userForm.get('passwordAgain')?.touched">
  请输入确认密码
</div>
<!-- 密码不一致提示 -->
<div *ngIf="userForm.hasError('passwordMismatch') && userForm.get('passwordAgain')?.touched">
  两次输入的密码不一致
</div>

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