multiple validators triggered in angular js?

multiple validators triggered in angular js?

Hi I am having a few validators in my angular form. this is how it looks. I am using Validators.compose to add a few custom validators. The validator errors are then displayed on the html component. In my case what i wanted to achieve is when matchingValidator throws an error i don't want angular to execute other two validators.

Hi I am having a few validators in my angular form. this is how it looks. I am using Validators.compose to add a few custom validators. The validator errors are then displayed on the html component. In my case what i wanted to achieve is when matchingValidator throws an error i don't want angular to execute other two validators.

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
          )
        ])
      }
    );

validator code is as below

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\[email protected]$!%*?&]{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;

};

my html code is as follows.

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

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

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

so in short what i want is if formGroup.hasError('passwordConfirmation') is true i want to stop printing validation error from other two validator. how can i achieve this . appreciate any help i am new to angular js and typescript.

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

What is AngularJs 4? Is it a good time to learn Angular Js 4?

Angular 4 is an open-source JS framework used for creating Mobile and web applications in HTML and TypeScript(which is a subset of JS). We can also say that Angular 4 is a significantly modified version of Angular 2. The change what Angular team brought was the TypeScript.