In this lecture, we are going to start adding validation to our forms, adding validation to a template
form is simple.
We add our validation rolls through all five attributes.
In the resource section of this lecture, I provide a link to a page called constraint validation.
This page goes over how to validate forms with a simple browsers can perform validation on their own.
If we're using template forms, Angular will hook into this process to validate forms internally.
If we scroll down, the page will come across a table of attributes.
We can apply these attributes to our inputs.
Angular will be able to validate the form with them.
Let's give it a try.
We are going to add to validation rules to the email field.
We should make it required and check if the email is in a valid format.
We will need to use a regular expression for validating an email.
H.M. does not come with a validator for this type of situation.
Fortunately, we're aware of a tool for helping us with regular expressions.
Let's navigate to the regular expression tool.
On the sidebar, we are going to click on the IOC 28 22 email validation, regular expression if it's
not there.
Search for it.
It's the most popular regular expression on this site.
According to the description, it will validate in email.
It's perfect for our situation.
Copy the irregular expression.
Be sure not to copy the forward slash characters or the letter G at the end.
Next, let's open the login template file.
On the input for the email and the required attributes.
We want the email to be required.
Behind the scenes, Angular will override the default behavior of the browser by running the value through
the validators dot required function.
It's a function we're very familiar with.
We frequently use this validator with the registration form.
Let's move on to adding a pattern.
We can add a regular expression to an input by adding the pattern attribute.
The value for this attribute will be the regular expression we copied earlier.
Like before, Angular will override the browser's default behavior by running the value through the
validators dot pattern function.
We should be good to go.
Let's test our form in the browser.
Under the form, the entire group is invalid because the email does not have a value.
Let's try providing the input a valid value.
After typing a valid value, our form is considered valid, we use successfully validated the email
field, adding validation to a form is dead simple.
We can add HTML five attributes to the input element.
Angular will be able to pick up on them.
It'll override the default behavior.
The form group will be able to store the current status of the form.
We can continue to check them to verify the validity of the form.
In the next lecture, we should start rendering friendlier messages to the user.
See you there!