Now that we have learnt about
template-driven form validation support in Angular in the previous lecture,
let's apply what we have learned to
the login form that we have designed in the previous exercise.
We will do simple form validation for the login form.
In particular, we'll specify the username and password as required,
and then check to ensure that the user types in information into these fields,
and be able to display error messages when the fields are empty.
Let's proceed ahead with this modification to the application in this exercise.
To get started on this exercise,
let's go to the login form here,
that we have in the login components template here.
We have already added in the novalidate attribute to the login form.
So, let's add in the template variable called loginForm to this template,
and then set this to ngForm as we understood from the previous lecture here.
So, by doing this,
we are specifying that this template variable enables us to track the state of the form.
So, we can even check for the valid or invalid state for this form.
Now, in addition, for each of these inputs,
we will also similarly add in the corresponding template variables here.
So, let me go to the next line here,
and there I'll say username is ngModel.
Then, we'll also specify this as required here.
Similarly, for the password,
we will add in the corresponding template variable here as password is in ngModel,
and then specify this as required here.
So, now that we have specified the template variables,
we can then carry out some of the form validation checks here.
Now, because we are specifying this as required,
that means that if these fields,
the input fields are empty,
then the required error will be flagged for this.
Similarly, now that we have the template variable for the form,
we can easily use that to check and disable the Submit button down below here.
So, for the Submit button,
what we do here is to use
the disabled field here,
and then we'll set the disabled field
to loginForm.form.invalid.
So, by doing this,
we will be disabling this button when the form is invalid.
So, thereby, the user cannot even submit the form when the form contains invalid entry.
So, for example, if the username is empty or the password is empty,
then the login form will be invalid,
and so the user cannot submit this form.
Now, this is one part of form validation that we can do,
whereby we can prevent the form from being submitted.
In addition, for each of these fields,
we can even display an error message to
indicate what kind of error is occurring in this particular field.
So, to do this,
to each of these form field elements,
we will add in the mat-error tag there,
and then we'll say stop ngIf,
and we'll say username.errors.
So, notice that we have already given this template a variable called username,
so that we can use in username.errors if there are errors and
if this error type is required.
So, if the error is a required type of error that is cause there,
then at that point,
we can specify that the corresponding error to be displayed is username is required.
So, that is the error that is going to be displayed for this field here.
Similarly, let me add the same kind of thing for the password field here.
So, let me copy that and then paste it in here,
and then we'll say password.errors.
Then, the message will be password is required.
So, by adding this,
we will be displaying error messages down below
these fields when the field doesn't contain any information.
Minor correction here.
That should be username?errors.required here,
and similarly, this one also should be.required here.
So, with these modifications,
my login component is now ready
to do the form validation and then display error messages.
So, let's save the changes and then go and take a look at the updated application.
Going to our application in the browser,
let's open the login form here.
So, you can see that now both the username and password carry
a star there to indicate that they are both required.
So, let me type in.
So, here, you see that the form is valid because it contains information,
and so the Login button will be enabled.
Let me remove the information from the password field,
and then you immediately notice that
the error is indicated here saying password is required.
Also note that the Login button will not be enabled anymore.
It'll be disabled. So, you will not be able to submit the form here.
But the moment I fill in something into the password,
then the Login button will be enabled,
and we will be able to submit the form here.
Similarly for the user name.
If I remove the username information there,
then you'll see the error being displayed here,
and also you will see that the Login button is not enabled at this point.
So, that's how the form validation can be carried out in this case.
So, as you have seen,
by adding in simple form validation to our application,
we can check to ensure that
the fields contain the information that they are suppose to contain,
and in the right format.
We will examine a little more of what form validation in one of the later exercises,
especially for reactive forms.
With this, we complete this exercise.
This is a good time for you to do a git commit
with the message template-driven forms, part two.