Angular reactive forms pattern validation not working as expected

Question

I've a reactive forms validation for a password, and the pattern is the following:

new RegExp('^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[#$^+=!*()@%&]).{8,50}$');

My goal is to validate the string so it is:

Between 8 & 50 characters
Has a lower case letter
Has an upper case letter
Has a number
And has a symbol

For some reason, it works like a charm, but if I enter a password that starts with a single number, the validation fails.

What am I doing wrong? Example passwords:

1dD5a971# -- doesn't match

11dD5a971# -- does match

The angular code:

 static PASSWORD_PATTERN = new RegExp('^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[#$^+=!*()@%&]).{8,50}$');
this.form= fb.group({
            user: [...],
            password: ['', [Validators.compose([
                Validators.required,
                Validators.min(8),
                Validators.max(50),
                Validators.pattern(AddUserComponent.PASSWORD_PATTERN)
            ])]]
        };

Thank you in advance.

I think the pattern works right? https://regex101.com/r/tv9IIM/1 — The fourth bird, Jan 22 '20 at 09:31
@chrnx Certainly yes. Though surely it can be written as `static PASSWORD_PATTERN = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[#$^+=!*()@%&]).{8,50}$/;` — Wiktor Stribiżew, Jan 22 '20 at 09:37
Could you remove [ ] outside Validators.compose and make it like this password: ['', Validators.compose([ Validators.required, Validators.min(8), Validators.max(50), Validators.pattern(AddUserComponent.PASSWORD_PATTERN) ])] — Ahmed Kesha, Jan 22 '20 at 09:37
Yes, I'm not sure if it's the problem with the regex, cuz lot of online testers say it's okay. But for my application it just doesnt work. — Hienz, Jan 22 '20 at 09:37
@AhmedKesha yes, deleted (no idea why i used it like that), still not working — Hienz, Jan 22 '20 at 09:38
@Wiktor Stribiżew Doesnt that result in a literal \ and a literal d instead of digits? — chrnx, Jan 22 '20 at 09:38
@chrnx https://stackoverflow.com/questions/17863066/why-do-regex-constructors-need-to-be-double-escaped — Wiktor Stribiżew, Jan 22 '20 at 09:40
Regex is correct I tried it and it works so could you please delete Validators.min(8), Validators.max(50) and try — Ahmed Kesha, Jan 22 '20 at 09:41
@Wiktor Stribiżew didn"t see he wrote it as a string. Thanks for the heads up though, didn"t know that — chrnx, Jan 22 '20 at 09:43

Muhammed Albarmavi · Accepted Answer · 2020-01-22T09:45:42.787

3

I 'm not a regex expert but it may be much better if you make a multi pattern rather than just a complex pattern,the goal was for me to keep it simple as possible and you can have a different message base of the patterns.

    this.form = fb.group({
      password: [
        "",
        [
          Validators.required, 
          Validators.minLength(8),
          Validators.maxLength(50),
          Validators.pattern(/[A-Z]/),
          Validators.pattern(/[a-z]/),
          Validators.pattern(/[0-9]/),
          Validators.pattern(/[!@#$]/),
         ]
      ]
    });

demo

edited Jan 22 '20 at 09:45

answered Jan 22 '20 at 09:41

Muhammed Albarmavi

23,240
8
66
91

All `{1,}`s are redundant here, consider removing. – Wiktor Stribiżew Jan 22 '20 at 09:44
Well, it works. In addition I can customize even more the error message to the user. Thanks dude. – Hienz Jan 22 '20 at 09:45

Angular reactive forms pattern validation not working as expected

1 Answers1