In this lecture, we are going to handle the error messages for the email field.
The process is going to be simpler than the error handling for our reactive forms.
Instead of creating a separate component, we will keep everything inside the log in component.
We don't want to spend so much time on template forms, since they're simpler overall.
Open the log in template file.
The first step for handling errors is to access the controls errors.
We can do so through the log and form template variable.
However, I think there's a better way instead of accessing the controls through the login form template
variable.
Let's add a template variable to the input elements.
We can access the controls directly through template variables.
It's going to result in less code on the input element for the email.
We will add a template variable called email.
We will set the email variable to the Energy Model Directive.
The new model, DirecTV, is responsible for creating an instance of the form control object.
Therefore, if we want to access the form control, we must set our variable to this directive.
We can start to work on the error below the input element.
We will add a paragraph element with the text read 400 class.
Inside this element, we will render the following message.
Email is invalid.
Once again, we're going to keep our air handling simple.
We aren't going to render a dozen different messages like last time before we ran into the message.
We should check if the control has been touched.
Angular will run validation immediately.
We don't want to annoy the user with an error message when they haven't had the chance to input a value
on the paragraph element, add an NGF directive.
The condition will be the following email errors and email touch and email dot dirty.
In total, we are checking for three properties.
First, we're checking if there are errors.
If the validation fails on the input, the errors property will contain the error related to the validator
function that failed.
It'll be set to know if the input is valid.
Second, we're checking if the field has been touched.
Lastly, we're checking if the value has changed.
One last thing we should remove the expression at the bottom of the template.
We added this expression to help us check the validation of our form.
Now that we're adding error messages, it's safe to remove the expression along with the surrounding
div elements.
Let's test the forum in the browser.
Initially, the air is hidden, even though the e-mail field is invalid.
We've hidden the air until the field has been touched and modified.
Let's try entering an invalid email.
The error should appear.
It's telling us the email is invalid.
Let's try a valid email.
The error has gone away great.
We've successfully rendered an error message.
We're finished with the email field in the next lecture.
We're going to start working on the password field.