How to show one password validation message at a time, if their are multiple ones in Angular?

Question

Followed below pattern for Validating Input Fields :.

At least 6-15 Characters long
At least 1 Lowercase Characters (a-z)
At least 1 Uppercase Characters (A-Z)
At least 1 Digits (0-9)
At least 1 Special Characters (*$@#)

So, Basically I want to show only one validation message at a time

You need to add some relevant code. What have you achieved so far? — Jacopo Sciampi, Feb 23 '23 at 13:01
this [SO](https://stackoverflow.com/questions/75481870/used-two-validations-for-the-same-field-but-at-a-particular-situation-those-bot) is closer your question — Eliseo, Feb 23 '23 at 15:19

score -1 · Answer 1 · answered Feb 23 '23 at 13:11

Later, I tried this solution and it worked perfectly.

custom-validators.ts

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

export class CustomValidators {
  static patternValidator(regex: RegExp, error: ValidationErrors): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
      if (!control.value) {
        // if control is empty return no error
        return null || {};
      }

      // test the value of the control against the regexp supplied
      const valid = regex.test(control.value);

      // if true, return no error (no error), else return error passed in the second parameter
      return valid ? null || {}: error;
    };
  }

  static passwordMatchValidator(control: AbstractControl) {
    const password: string = control.get('password')?.value; // get password from our password form control
    const confirmPassword: string = control.get('confirmPassword')?.value; // get password from our confirmPassword form control
    // compare is the password math
    if (password !== confirmPassword) {
      // if they don't match, set an error in our confirmPassword form control
      control.get('confirmPassword')?.setErrors({ NoPassswordMatch: true });
    }
  }
}

check-validation.html

<div class="mb-3">
          <mat-form-field appearance="outline" class="w-100">
            <mat-label>Enter New password</mat-label>
            <input matInput formControlName="newPassword" [type]="hideNew ? 'password' : 'text'"
              (keypress)="validation.noFirstSpaceAllow($event)" maxlength="15">
            <button type="button" mat-icon-button matSuffix (click)="hideNew = !hideNew"
              [attr.aria-label]="'Hide password'" tabindex="-1" [attr.aria-pressed]="hideNew"
              [matTooltip]="hideNew?'Show':'Hide'">
              <mat-icon class="material-symbols-outlined">{{hideNew ? 'visibility_off' : 'visibility'}}</mat-icon>
            </button>
            <mat-error *ngIf="changePasswordForm.controls['newPassword'].errors">
              <span class="text-danger" *ngIf="changePasswordForm.controls['newPassword'].hasError('minlength') || 
                      changePasswordForm.controls['newPassword'].hasError('hasNumber') || 
                      changePasswordForm.controls['newPassword'].hasError('hasCapitalCase') ||
                      changePasswordForm.controls['newPassword'].hasError('hasSmallCase') ||
                      changePasswordForm.controls['newPassword'].hasError('hasSpecialCharacters')
                      ">
                {{
                changePasswordForm.controls['newPassword'].hasError('minlength') ? 'Please Enter Minimum 6 Characters' :
                changePasswordForm.controls['newPassword'].hasError('hasNumber') ? 'Please Enter at least 1 number!' :
                changePasswordForm.controls['newPassword'].hasError('hasCapitalCase') ? 'Please Enter at least 1 Letter in
                Capital Case!' :
                changePasswordForm.controls['newPassword'].hasError('hasSmallCase') ? 'Please Enter at least 1 Letter in
                Small Case!' : 'Please Enter at least 1 Special Character!'
                }}
              </span>
            </mat-error>
          </mat-form-field>
</div>

check-validation.ts

controlForm() {
    this.changePasswordForm = this.fb.group({
      currentPassword: ['', [Validators.required, Validators.pattern(this.validation.valPassword)]],
      newPassword: [
        '',
        Validators.compose([
          Validators.required,
          // check whether the entered password has a number
          CustomValidators.patternValidator(/\d/, {
            hasNumber: true
          }),
          // check whether the entered password has upper case letter
          CustomValidators.patternValidator(/[A-Z]/, {
            hasCapitalCase: true
          }),
          // check whether the entered password has a lower case letter
          CustomValidators.patternValidator(/[a-z]/, {
            hasSmallCase: true
          }),
          // check whether the entered password has a special character
          CustomValidators.patternValidator(
            /[ @$!%*?&#]/,
            {
              hasSpecialCharacters: true
            }
          ),
          Validators.minLength(6)
        ])
      ],
      retypePassword: ['', [Validators.required, Validators.pattern(this.validation.valPassword)]]
    });
  }

How to show one password validation message at a time, if their are multiple ones in Angular?

1 Answers1