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 JS Development Company

If you’re finding AngularJS Development Company for consultation or Development, your search ends here at Data EximIT 

🔗 Click here to know more: AngularJS Development




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.

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.