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?

minLength(8) should be suficient. To control equalty: angular.io/guide/form-validation#cross-field-validation — JB Nizet
– JB Nizet, Commented Aug 2, 2018 at 5:29
You want a password validation algorithm in typescript. Did you try google or do you hope someone here does your work. I checked google and I found several examples in 10 seconds — Bert Verhees
– Bert Verhees, Commented Aug 2, 2018 at 5:31
@BertVerhees: I am looking for a regex not an algorithm in typescript — user2818430
– user2818430, Commented Aug 2, 2018 at 5:35
You don't need regex if you want to allow anything. The only thing you want is an algorithm — Bert Verhees
– Bert Verhees, Commented Aug 2, 2018 at 5:37
@JBNizet: Thanks for that didn't know that. Quite new to Angular 6... — user2818430
– user2818430, Commented Aug 2, 2018 at 5:37

user2818430 · Accepted Answer · 2018-08-20 03:41:38Z

3

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.

answered Aug 20, 2018 at 3:41

user2818430

6,07921 gold badges92 silver badges155 bronze badges

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

Comments

Emad Jaweed · Accepted Answer · 2021-05-03 07:31:05Z

1

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($@$!%*?&).

answered May 3, 2021 at 7:31

Emad Jaweed

111 bronze badge

Comments

Kishan Lal · Accepted Answer · 2021-06-04 15:17:22Z

0

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,}))/)

answered Jun 4, 2021 at 15:17

Kishan Lal

5232 gold badges5 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angular 6 reactive form password validation regex pattern and confirmation validation

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related