In this lecture, we are going to finish the blog informed by validating the password field, validating
the password will not be much different than validating the email field.
I think this would be a great opportunity for a coding exercise.
Try invalidating the password field on your own, create a control and validators and render an error
message.
Pause the video and good luck.
Welcome back.
If you were able to validate the password field, that's great.
If not, that's fine as well.
We will walk through the process together.
We will be working inside the login template file.
The password field can be found under a comment that says password, the first step for validating a
field is to create a form control form.
Controls can be created by adding the new model directive to the input element.
Next, we need to set the ID for the control IDs can be added through the name attribute.
The name of the field will be called password.
After setting the ID, we should start adding validators to the form control.
We aren't going to go heavy on the rules.
We should keep it simple by adding the required attributes.
The rules for the input have been added, if you would like to add more rules.
That's perfectly fine.
The current set of rules will work for our scenario.
We should start rendering an error message.
The current status of our inputs is not available outside the form control.
We can extract this information by adding a template variable on the input element at a template variable
called password.
Angular will return the element the variable is applied to.
That's not what we're looking for.
We need the form control object.
We can grab the control by setting the variable to the Energy Model Directive.
The new Model Directive is responsible for creating the form control object.
We will be able to access these status properties through this template variable below the input.
We will render the error message to save some time.
We will make a copy of the error message from the previous input.
Copy and paste the paragraph element from the email field to the password field.
The conditions will need to be updated instead of checking the email variable for the status of the
field.
We will replace this variable with the password template variable.
Inside the paragraph element, the message will be updated to the following text password is invalid.
We're almost finished.
There is one last thing we will do.
We should store the password in the class file.
We have an object called credentials for storing the user's information.
We are going to need this information during form submission.
We can add to weigh binding to the model to grab the value on the new model directive.
Let's apply to weigh binding.
The directive will be bound to be credentials dot password property.
We're finished.
Let's test the password field in the browser.
If we type inside the password field and remove the value, the error will appear.
As expected, the validation is working perfectly.
We can type a value to remove the error.
The validation rules we added to the field are simple.
We're asking the user to provide any value log in forms are not as strict as registration forms, either
the user types in the correct information or they don't.
In the next lecture, we will finalize the log in form, which is to handle the form submission.