Angular中FormGroup自定义验证器实现遇TS2322错误求助

看起来你遇到了两个核心问题：一是自定义验证器的返回值不符合Angular ValidatorFn 的要求，二是跨字段的匹配验证应该绑定到 FormGroup 级别，而不是单个 FormControl 上。下面一步步帮你解决：

1. 修正自定义验证器的返回值 #

Angular 的 ValidatorFn 要求函数必须返回 ValidationErrors | null，而你的当前实现返回的是 void（无返回值），这就是 TS2322 错误的直接原因。我们调整 MustMatch 函数，让它返回正确的类型，同时优化逻辑：

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

// 用于检查两个字段是否匹配的自定义验证器
export function MustMatch(controlName: string, matchingControlName: string): ValidatorFn {
  return (formGroup: FormGroup): ValidationErrors | null => {
    const control = formGroup.controls[controlName];
    const matchingControl = formGroup.controls[matchingControlName];

    // 如果匹配控件已有其他未解决的错误，跳过当前验证
    if (matchingControl.errors && !matchingControl.errors['mustMatch']) {
      return null;
    }

    // 检查两个字段值是否匹配
    if (control.value !== matchingControl.value) {
      // 给匹配控件设置错误标记，同时返回符合要求的错误对象
      matchingControl.setErrors({ mustMatch: true });
      return { mustMatch: true };
    } else {
      // 如果匹配成功，清除mustMatch错误（如果存在）
      if (matchingControl.errors?.['mustMatch']) {
        delete matchingControl.errors['mustMatch'];
        // 若没有其他错误，清空控件的错误对象
        if (Object.keys(matchingControl.errors || {}).length === 0) {
          matchingControl.setErrors(null);
        }
      }
      return null;
    }
  };
}

2. 将验证器绑定到 FormGroup 级别 #

跨字段验证（比如密码和确认密码匹配）需要访问整个表单组的控件，因此不能把它加到单个 confirmPass 的验证器数组里，而是要作为 FormGroup 的验证器传入：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from "@angular/forms";
import { MustMatch } from "../../customValidators/mustMatch";

@Component({
  selector: 'app-change-password',
  templateUrl: './change-password.component.html',
  styleUrls: ['./change-password.component.scss']
})
export class ChangePasswordComponent implements OnInit {
  changePasswordForm = new FormGroup({
    currentPass: new FormControl('', Validators.required),
    newPass: new FormControl('', Validators.required),
    confirmPass: new FormControl('', Validators.required),
  }, { validators: MustMatch('newPass', 'confirmPass') }); // 绑定到FormGroup级别

  constructor() { }

  ngOnInit() { }
}

额外说明 #

• 为什么要绑定到FormGroup？单个FormControl的验证器只能访问当前控件的值，无法获取其他控件（比如newPass）的值，而FormGroup的验证器可以访问整个表单的所有控件，刚好满足跨字段验证的需求。
• 修正后的验证器既返回了符合Angular要求的ValidationErrors | null，同时也维护了控件自身的错误状态，你可以在模板中通过changePasswordForm.get('confirmPass')?.errors?.['mustMatch']来判断是否显示匹配错误提示。

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