Angular reactive forms pattern validator adding $ to regex and breaking validation

问题

I'm trying to validate a password with the following regex:
^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.{8,}).
Note that there is no terminating $ char, because that would prevent valid passwords from being accepted. (I'm not sure why the input field doesn't terminate the string).
However, Angular's Validators.pattern adds the end of string char. And therefore my valid passwords fail.
How do I prevent the pattern validator from adding the $?
I suppose I could roll my own password validator, but surely there is a better solution...?

EDIT: Passwords that should succeed:

Test1234
tEst1234
tesT1234
1234Test
1234tesT
t#St1234

Passwords that should fail:

TEST1234
test1234
tEst123
Test123
testtest
12345678

Validator declaration:

this.password = new FormControl('', [Validators.required, Validators.pattern('^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.{8,})')]);
this.userForm.addControl('Password', this.password);

回答1:

You may add a .* at the end, or even revamp the pattern a bit to convert one lookahead into a consuming pattern:

Validators.pattern('(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{8,}')

Or, better, when using a regex for password validation, follow the principle of contrast:

Validators.pattern('(?=[^A-Z]*[A-Z])(?=[^a-z]*[a-z])(?=[^0-9]*[0-9]).{8,}')

Angular will add ^ and $ on both ends of the regex pattern, so the pattern will look like

^(?=[^A-Z]*[A-Z])(?=[^a-z]*[a-z])(?=[^0-9]*[0-9]).{8,}$

See the regex demo

Details

^ - start of string
(?=[^A-Z]*[A-Z]) - at least 1 uppercase ASCII letter
(?=[^a-z]*[a-z]) - at least 1 lowercase ASCII letter
(?=[^0-9]*[0-9]) - at least 1 ASCII digit
.{8,} - any 8 or more chars (other than line break chars)
$ - end of string.

来源：https://stackoverflow.com/questions/51741573/angular-reactive-forms-pattern-validator-adding-to-regex-and-breaking-validati

标签

regex

angular

angular-reactive-forms