In this lecture, we are going to validate inputs with regular expressions, handling passwords is not
something we should take lightly.
We need to be extremely careful with a user's password.
We can help users keep their accounts secure by suggesting a strong password.
Regular expressions are the most common method to check if a password is strong out of the box.
Angular ships a validator for running an inputs value against a regular expression.
We are going to apply this validator to our password fields to get started.
Open the register template file.
Inside the template, we have two password fields, one field for storing the password.
Another field for verifying the password.
The password confirmation field will require a different set of validation rules.
There are topics we will need to discuss before validating the password confirmation field.
For this reason, we are going to keep the validation rules for this field simple.
Let's replace the input elements with the app input component.
On the first input element, we will bind the control property to the password form control.
The type property will be set to password.
The placeholder property will be set to the following message enter password.
Let's move on to the second input component.
The control property will be bound to the confirm password form control.
The type property will be set to password.
Lastly, the placeholder property will have the following message confirm password.
Our components are ready.
We can begin adding validator functions to the form controls, open the register component class file.
We are going to modify the password form control by passing in an array of validators to validator should
be applying to this control.
They're called required and pattern.
The pattern validator is new to us in the resource section of this lecture, I provide a link to this
validator function.
This validator will check our input against a regular expression, the regular expression can be anything
we want.
The documentation has some extra information that isn't important to us at the moment.
If we scroll to the usage notes, we'll be given an example of an error object for this demonstration.
We won't mean this object.
However, it's still good to know what sort of error gets produced by the validator function.
Regular expressions can be difficult to write.
The syntax for them is tough to read.
Luckily, there's a tool online for helping us debug a regular expression in the resource section of
this lecture.
I provide a link to this tool.
It's a tool for breaking down regular expressions.
If you're unsure how a regular expression works, it's a great tool for playing around with them on
the sidebar.
We can search through regular expressions submitted by the community.
Let's search for a password expression.
The first result is highly rated.
We should use it if we click on it will be given the expression along with a note.
The note says the expression will check if the character length is at least eight characters has at
least one uppercase letter, one lowercase letter and one number.
I think this is a good start.
Let's copy the entire expression.
Back in the ED, we will paste it into the pattern function.
We aren't going to add on the regular expression.
It's perfect, as is, before we start working on an error message.
We will validate be password confirmation fields add an array to the form control object.
We are going to add the required validator.
This field should match with the password field.
However, there are other topics we need to dive into before validating this field.
We will come back to it in a future section.
For now, the required validator will work.
Let's start creating some error messages.
Open the input template file.
At the top of the kng container element, we will add a paragraph element with the text read for Hunter
Class.
Next, we will add the NGF directive with the following expression control errors.
Question mark dot pattern.
If this air gets triggered, we will output the following message.
Passwords must be at least eight characters long have one uppercase letter, one lowercase letter and
one number.
Unfortunately, we aren't going to be told which part of the regular expression was broken, therefore
we'll output the entire list of possible errors with the input.
Let's test the validation in the browser.
If we type in the password field, we will get an air until the regular expression test passes.
I'm going to type in a valid password.
With the help of regular expressions, we can assist users with creating robust passwords.
We're almost finished validating the form.
We have a few more fields.
Let's finish them in the next lecture.