How to use Angular pattern validator on FormControl multiple times with different error message

Question

I am developing reset password form, where I want to validate the password field with some validation. Validations are mentioned below:

1 Character Uppercase.
1 Character LowerCase.
Minimum Length should be 8.
Max Length of 10.

Here is my component code as per need.

this.userForm = this.appFormBuilder.group({
  password:['',[Validators.pattern(/[a-z]/),Validators.pattern(/[A-Z]/), Validators.min(8),Validators.max(10)]]
})

I want to show error message of respective condition has been failed on UI, But I am getting pattern error object on UI. How can I show error message of respective condition failed. Here is my Html code:

<div [formGroup]="userForm">
  <input type="text" formControlName="password" />
  {{userForm.controls.password.errors | json}}
</div>

Suresh Kumar Ariya · Accepted Answer · 2018-10-18 04:32:05Z

1

You can create an function which will validate the form control

export function validatPatternMatch(control: AbstractControl): {[key: string]: boolean}  {
  const age = control.value;
  if(condition1 fails){
    return {lowercase: true};
  }else if(condition2 fails){
    return {uppercase: true};
  }
  return null; // no error
}

this.userForm = this.appFormBuilder.group({
  password:['',[validatPatternMatch]]
});

<div [formGroup]="userForm">
  <input type="text" formControlName="password" />
   {{userForm.controls.password.errors. pattern}}
  <div *ngIf="f.firstName.errors?.lowercase">One Lowercase</div>
  <div *ngIf="f.firstName.errors?.uppercase">One Uppercase</div>

answered Oct 18, 2018 at 4:32

Suresh Kumar Ariya

9,8041 gold badge22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vipul Joshi Over a year ago

Ok, Thanks, I will try and let you know

Sunil · Accepted Answer · 2018-10-18 04:58:12Z

1

You can get the error message from specific validation name.

Ex :

<div [formGroup]="userForm">
  <input type="text" formControlName="password" />
  {{userForm.controls.password.errors. pattern}}
  <div *ngIf="f.firstName.errors.min">Min length should be 8</div>
  <div *ngIf="f.firstName.errors.max">Min length should be 10</div>
  <div *ngIf="f.firstName.errors.pattern">Pasword format must be xyz format</div>
</div>

Multiple errors with the same error (e.g.: 'pattern') will be override.

So if you want to use same pattern validator you should write the custom validator.

 regexValidator(regex: RegExp, error: ValidationErrors): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} => {
      if (!control.value) {
        return null;
      }
      const valid = regex.test(control.value);
      return valid ? null : error;
    };
  }

-

 this.regexValidator(new RegExp('[a-z]'), {'smallLetters': ''}),
 this.regexValidator(new RegExp('[A-Z]'), {'capitalLetters': ''})

html

<div *ngIf="r.firstName.hasError('precision')">It must have small letter </div>

edited Oct 18, 2018 at 4:58

answered Oct 18, 2018 at 4:07

Sunil

11.3k2 gold badges29 silver badges48 bronze badges

2 Comments

Vipul Joshi Over a year ago

Thanks, But how can I show the Uppercase and lowercase message.

Sunil Over a year ago

Updated the answer.

Collectives™ on Stack Overflow

How to use Angular pattern validator on FormControl multiple times with different error message

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related