求助：Angular 5添加密码匹配验证器后表单invalid始终不为false

看起来你遇到的问题是添加密码匹配验证器后，表单的invalid属性始终为true，没法切换到有效状态对吧？这通常是因为验证器的应用位置或者逻辑存在问题，我来给你梳理下解决步骤：

1. 确保密码匹配验证器绑定到FormGroup上 #

密码匹配需要对比两个控件的值，所以这个验证器不能加在单个FormControl上，必须绑定到整个表单组（FormGroup）上。先定义一个正确的验证器函数：

passwordMatchValidator(form: FormGroup) {
  // 获取密码和确认密码控件的值
  const password = form.get('Password')?.value;
  const confirmPassword = form.get('ConfirmPassword')?.value;

  // 如果两个值都存在且相等，返回null（验证通过）；否则返回错误对象
  return password && confirmPassword && password === confirmPassword 
    ? null 
    : { passwordMismatch: true };
}

2. 在创建表单时正确应用验证器 #

创建FormGroup的时候，把验证器作为第二个参数（配置对象的validators属性）传入，而不是加到单个控件上：

this.CreateUserForm = new FormGroup({
  Email: new FormControl(null, Validators.required),
  Password: new FormControl(null, Validators.required),
  ConfirmPassword: new FormControl(null, Validators.required),
  FirstName: new FormControl(null, Validators.required),
  LastName: new FormControl(null, Validators.required),
  // 你的其他控件（比如MiddleInitial）...
}, { validators: this.passwordMatchValidator });

3. 排查其他可能导致表单无效的原因 #

如果按上面的方法修改后还是无效，你可以做这些调试：

• 检查表单内的所有必填控件是否都已填写，比如Email、FirstName这些必填项有没有空值，单个控件的invalid状态是否为false
• 在组件里打印this.CreateUserForm.errors，看看是否存在passwordMismatch错误，或者其他未注意到的验证错误
• 确认验证器里的字段名（Password、ConfirmPassword）和你表单中控件的名称完全一致（注意大小写是否匹配）

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