Angular - FormGroup 上的验证器会破坏 FormControl 上的单个验证器

Question

我有一个标准的更改密码页面，所以你输入旧密码，然后输入新密码，最后重复新密码。

在“new password”上，我有多个自定义验证器，我还需要一个来检查“new password”是否等于“old password”。

但是我当然不能从FormControl 做到这一点，因为我无法访问“old password”FormControl，所以我需要在FormGroup 上进行验证。

但是发生的情况是，当它在FormGroup 上验证这部分时，突然“new password”FormControl 上的所有验证器都被触发！！

有什么原因吗？

 this.myForm = this.formBuilder.group(
      {
        oldPassword: [
          "",
          {
            validators: [Validators.required],
        ],
        newPassword: [
          "",
          Validators.compose([
            Validators.required,
            CustomValidators.patternValidator(/\d/, { hasNumber: true }),
            CustomValidators.patternValidator(/[A-Z]/, {
              hasCapitalCase: true,
            }),
            CustomValidators.patternValidator(/[a-z]/, { hasSmallCase: true }),
            CustomValidators.patternValidator(
              /[ !@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/,
              { hasSpecialCharacters: true }
            ),
            Validators.minLength(8),
          ]),
        ],
        confirmNewPassword: ["", Validators.compose([Validators.required])],
      },
      { validators: [CustomValidators.passwordMatchValidator] }
    );
  }

我的自定义passwordMatchValidator：

static passwordMatchValidator(control: AbstractControl) {
    const password: string = control.get("newPassword").value; 
    const confirmPassword: string = control.get("confirmNewPassword").value; 
    const oldPassword: string = control.get("oldPassword").value;

    if (password !== confirmPassword) {
      control.get("confirmNewPassword").setErrors({ NoPassswordMatch: true });
    }

    if (password === oldPassword) {

   control.get("newPassword").setErrors({ OldPasswordMatch: true });
  }
  }

所以基本上，如果这个 FormGroup 验证器触发了“OldPasswordMatch”错误，那么突然间，newPassword FormControl 上的所有特定验证器都会被触发，这是为什么呢？

我无法将此验证放在FormControl“new password”上，因为它无法访问FormControl“old password”

Answer 1

不确定您所说的“所有验证器都在触发”，因为它们一直在验证，但无论如何，您没有正确实施组级验证器。验证器不应该访问控件和设置错误，它们返回 null 或错误对象......因为它是一个组级验证器，它应该更像：

static passwordMatchValidator(control: AbstractControl) {
    const password: string = control.get("newPassword").value; 
    const confirmPassword: string = control.get("confirmNewPassword").value; 
    const oldPassword: string = control.get("oldPassword").value;

    let errors = null;

    if (password !== confirmPassword) {
      errors = { NoPassswordMatch: true };
    }

    if (password === oldPassword) {
      errors = Object.assign(errors || {}, { OldPasswordMatch: true });
    }

    return errors;
}

那么这个错误就会出现在组里。您需要在模板/用户提示中考虑到这一点。

要让您的输入了解角度材料的错误，您必须实现ErrorStateMatcher：

import {FormControl, FormGroupDirective, NgForm} from '@angular/forms';
import {ErrorStateMatcher} from '@angular/material/core';

export class GroupErrorStateMatcher implements ErrorStateMatcher {

  constructor(private checkError: string) {}

  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const groupError = form && form.hasError(this.checkError);
    return !!(control && (control.invalid || groupError) && (control.dirty || control.touched));
  }
}

在组件中使用：

oldPasswordMatch =  new GroupErrorStateMatcher('OldPasswordMatch')
noPasswordMatch =  new GroupErrorStateMatcher('NoPassswordMatch')

您将其附加到相应的输入：

<input matInput [errorStateMatcher]="oldPasswordMatch" formControlName="newPassword">

<input matInput [errorStateMatcher]="noPasswordMatch" formControlName="confirmNewPassword">