несколько валидаторов запущены в угловых

Question

Привет, у меня есть несколько валидаторов в моей угловой форме.Вот как это выглядит.Я использую Validators.com, чтобы добавить несколько пользовательских валидаторов.Ошибки валидатора затем отображаются в html-компоненте.В моем случае, чего я хотел добиться, так это, когда matchingValidator выдает ошибку, я не хочу, чтобы angular выполнял другие два валидатора.

this.formGroup = this.fb.group(
      {
        password: ['', [Validators.required, Validators.minLength(8)]],
        confirmPassword: ['', [Validators.required, Validators.minLength(8)]]
      },
      {
        validator: Validators.compose([
          matchingValidator('password', 'confirmPassword'),
          passwordStrengthValidator('password', 'confirmPassword'),
          blacklistedPasswordValidator(
            'password',
            'confirmPassword',
            this.blacklistedPasswords
          )
        ])
      }
    );

код валидатора, как показано ниже

export function matchingValidator(
  passwordControlName = 'password',
  passwordConfirmControlName = 'passwordConfirm'
): ValidatorFn {
  return (formGroup: FormGroup): ValidationErrors => {
    const passwordValue: string = formGroup.get(passwordControlName).value;
    const passwordConfirmValue: string = formGroup.get(
      passwordConfirmControlName
    ).value;

    if (passwordValue.length && passwordConfirmValue.length) {
      return passwordValue !== passwordConfirmValue
        ? { passwordConfirmation: true }
        : null;
    }

    return null;
  };
}
export function passwordStrengthValidator(
  passwordControlName = 'password',
  passwordConfirmControlName = 'passwordConfirm'
): ValidatorFn {
  return (formGroup: FormGroup): ValidationErrors => {
    const passwordValue: string = formGroup.get(passwordControlName).value;
    const passwordConfirmValue: string = formGroup.get(
      passwordConfirmControlName
    ).value;

    if (
      passwordValue &&
      passwordConfirmValue &&
      passwordValue.localeCompare(passwordConfirmValue) === 0 &&
      passwordValue.length >= 8
    ) {
      if (
        !/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/.test(
          passwordValue
        )
      ) {
        return { invalidPasswordStrength: true };
      }
    }
    return null;
  };
}

export function blacklistedPasswordValidator(
  passwordControlName = 'password',
  passwordConfirmControlName = 'passwordConfirm',
  blacklistedPasswords: string[]
): ValidatorFn {
  return (formGroup: FormGroup): ValidationErrors => {
    const passwordValue: string = formGroup.get(passwordControlName).value;
    const passwordConfirmValue: string = formGroup.get(
      passwordConfirmControlName
    ).value;
    if (
      passwordValue &&
      passwordConfirmValue &&
      passwordValue.localeCompare(passwordConfirmValue) === 0 &&
      passwordValue.length >= 8
    ) {
      let found = false;
      found = blacklistedPasswords.some(element => element === passwordValue);

      if (found) {
        return { blacklistedPassword: true };
      }
    }
    return null;
  };

мой HTML-код выглядит следующим образом.

 <alert type="danger" dismissable="false" *ngIf="formGroup.hasError('passwordConfirmation')">
        {{ 'VALIDATION.ERRORS.MATCHING_PASSWORDS' | translate }}
      </alert>

      <alert type="danger" dismissable="false" *ngIf="formGroup.hasError('invalidPasswordStrength')">
        {{ 'VALIDATION.ERRORS.PASSWORD_STRENGTH_INVALID' | translate }}
      </alert>

      <alert type="danger" dismissable="false" *ngIf="formGroup.hasError('blacklistedPassword')">
        {{ 'VALIDATION.ERRORS.PASSWORD_NOT_PERMITTED' | translate }}
      </alert>

Короче говоря, я хочу, чтобы formGroup.hasError ('passwordConfirmation') имел значение true, и я хочу прекратить печатать ошибку проверки из двух других валидаторов.Как я могу достичь этого.признателен за любую помощь, я новичок в угловых JS и машинопись.

Answer 1

Просто сделайте проверку умнее:

<alert type="danger" dismissable="false" *ngIf="formGroup.hasError('passwordConfirmation') && !(formGroup.hasError('invalidPasswordStrength') || formGroup.hasError('blacklistedPassword'))">
    {{ 'VALIDATION.ERRORS.MATCHING_PASSWORDS' | translate }}
  </alert>

Я показал один пример выше, но будьте осторожны.Если все три верны, то вы не увидите никакой ошибки.Я бы рекомендовал проверять только другие ошибки для всех, кроме одного из возможных типов ошибок, чтобы предотвратить эту проблему.

К вашему сведению, существует более простой способ достичь ошибок, используя formControlName на вашем входе, см.документы .