Angular自定义FormGroup校验器报TS2345类型不匹配错误如何解决？

问题原因 #

Angular的FormGroup构造函数接收的全局校验器类型是ValidatorFn，该类型规定校验函数的入参必须是AbstractControl类型，你自定义的passwordMatchValidator校验函数直接将入参声明为FormGroup，类型不匹配触发了TS编译报错。
另外你当前的HTML错误提示逻辑也有问题：跨字段校验产生的notmatched错误是挂载在整个表单组实例上，而非password2单个控件上，原写法无法正确触发密码不匹配的提示。

解决方案 #

第一步：修改自定义校验函数的类型声明 #

将app.component.ts中的passwordMatchValidator函数修改为如下代码：

passwordMatchValidator(control: AbstractControl){
  // 类型断言为FormGroup即可调用FormGroup的相关方法
  const fg = control as FormGroup;
  return fg.get('password')?.value === fg.get('password2')?.value ? null : {notmatched: true}
}

第二步：修改HTML中的密码不匹配提示逻辑 #

将密码重复输入框下方的密码不匹配提示行修改为如下代码：

<small *ngIf="exform.hasError('notmatched') && password2.touched" class="text-danger">Parola Uyuşmuyor</small>

修改完成后重新编译即可解决报错，同时密码一致性校验的提示逻辑也能正常生效。

内容的提问来源于stack exchange，提问作者Alper Yıldırım