Angular 6自定义验证中(group: FormGroup)=>ValidationResult含义咨询

嘿，我来帮你彻底搞懂这个部分的含义！首先咱们先把这段代码的结构拆解清楚：

你写的comparePasswords是一个验证器工厂函数——它本身不是直接的验证器，而是用来生成真正的表单验证器的函数。而(group: FormGroup) => ValidationResult就是这个工厂函数的返回值类型声明，具体拆解来看：

1. 箭头前后的两部分分别代表什么？ #

• (group: FormGroup)：这部分声明了「工厂函数返回的那个验证器函数」接受的参数——它需要一个FormGroup类型的参数（就是你要验证的整个表单组），参数名叫group。
• => ValidationResult：这部分声明了「工厂函数返回的那个验证器函数」的返回值类型。在Angular表单体系里，ValidationResult本质是一个键值对对象：
  • 如果验证失败，返回一个对象，比如你的例子里的{ mismatchedPasswords: true }，键是自定义的错误标识，值用来标记验证不通过；
  • 如果验证通过，就返回null（或者不返回值，也就是undefined）。

2. 结合代码看实际作用 #

你代码里的这段：

return (group: FormGroup): ValidationResult => { 
  const password = group.controls[passwordKey]; 
  const confirmPassword = group.controls[confirmPasswordKey]; 
  if (password.value !== confirmPassword.value) { 
    return { mismatchedPasswords: true }; 
  } 
};

就是在返回一个完全符合(group: FormGroup) => ValidationResult类型的箭头函数——这个函数才是Angular真正会调用的验证逻辑。

3. 为什么要这么设计？ #

这种工厂函数的写法是为了复用性：你可以通过传递不同的passwordKey和confirmPasswordKey，让这个验证器适配不同字段名的表单（比如有的表单可能叫pwd和confirmPwd），而不用重复写验证逻辑。

举个实际使用的例子：

// 在组件中使用这个验证器
this.registerForm = this.formBuilder.group({
  password: ['', [Validators.required]],
  confirmPassword: ['', [Validators.required]]
}, {
  validator: YourValidatorClass.comparePasswords('password', 'confirmPassword')
});

这里comparePasswords返回的那个箭头函数，就会被Angular用来校验整个registerForm表单组。

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