Angular 6 reactive form password validation regex pattern and confirmation validation

Question

I am trying to build a registration form using Angular 6 reactive forms.

 ngOnInit() {
this.registerForm = this.formBuilder.group({
  firstName: ['', [Validators.required],
  lastName: ['', [Validators.required]],
  email: ['', [Validators.required, Validators.email]],
  password: ['', [Validators.required, Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}$')]],
  confirmPassword: ['', [Validators.required, Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}$')]]
});

}

How can I make the validation so that will allow:

• numbers
• capitals
• lower letters
• any special character
• min 8 characters

This regex I am using works fine but I cannot use any other special characters for example I tried Demoo123# and didn't work. However Demoo123@ worked fine. I assume there is a problem in my regex with the special characters section. Do I have to manually mention all allowed special characters? Or is there some kind of shortcut for that? I read somewhere that regex don't like hashtags #... is that true?

Another issue is how can I make a confirm validation so that the confirmPassword value must be same as password field value?

Answer 1

The problem was that I didn't add to the password field the pattern attribute. <input pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}$" >

That's quite wired. Why I need to specify it on the input when it is specified in the code? No idea but it works.

Answer 2

TypeScript Validation in formGroup

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

message: Password must contain more than 8 characters, 1 numeric, 1 upper case letter, and 1 special character($@$!%*?&).

Answer 3

Passing a RegEx as paramater works for me:

Validators.pattern(new RegExp("^(?=.*[A-Z])(?=.*[!@#\$%\^&\*])(?=.{9,}))")

Or we can use the forward slash to both the ends of the pattern:

/your_pattern_here/

eg:

Validators.pattern(/^(?=.*[A-Z])(?=.*[!@#\$%\^&\*])(?=.{9,}))/)