Angular 6 - reactive form validation pattern doesn't work

Question

I have an Angular 6 reactive form and trying to validate a password with regex pattern and it doesn't work.

               <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }"
                    />
                    <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
                        <div *ngIf="f.password.errors.required">Required</div>
                        <div *ngIf="f.password.errors.pattern">Not valid</div>
                    </div>
                </div>

The regex I am usng is like this:

 ngOnInit() {
     this.registerForm = this.formBuilder.group({
           password: ['', [Validators.required, Validators.pattern('^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$')]],

      });
  }

Whatever I enter in the password I get the error message in the ui Not valid

Any idea what I am doing wrong?

You may check my answer here about style the state of the reactive form control stackoverflow.com/questions/51583952/… — Muhammed Albarmavi
– Muhammed Albarmavi, Commented Jul 29, 2018 at 22:36
I don't know what your regex mean ,sorry but can you check my answer here about pattern validation stackoverflow.com/questions/51551831/… — Muhammed Albarmavi
– Muhammed Albarmavi, Commented Jul 29, 2018 at 22:39

Vlada Veljkovic · Accepted Answer · 2018-09-07 07:41:35Z

9

You need to drop ('') and put (//) instead into parameter in your pattern method. It should be:

password: ['', [Validators.required, Validators.pattern(/^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/)]]

answered Sep 7, 2018 at 7:41

Vlada Veljkovic

1511 silver badge6 bronze badges

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

1 Comment

Ronald Dsouza Over a year ago

Thanks! worked. (?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&]) needed RegExp and not String.

N. Richli · Accepted Answer · 2019-03-22 09:54:22Z

0

You have to put a second backslash before the d's and remove the '^' and '$' like following example:

'(?=.*[A-Za-z])(?=.*\\d)(?=.*[$@$!%*#?&])[A-Za-z\\d$@$!%*#?&]{8,}'

answered Mar 22, 2019 at 9:54

N. Richli

1021 silver badge10 bronze badges

Collectives™ on Stack Overflow

Angular 6 - reactive form validation pattern doesn't work

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related