We have just completed learning about Angular template-driven forms and also, in the exercise, constructed our first template-driven form. Now, when the user types in information into the form fields, we may wish to validate the data that the user types into those data fields. In the early days of the web, the only way of checking the data was to ship the data over to the server and then do the checks on the server side, and then get the result from the server side. But these days, with powerful client-side frameworks like Angular, a lot of the data validation can easily be carried out on the client side itself and we can easily catch a lot of the errors on the client side, and then even provide indication to the user about the errors. Now, this is where we'll look at Angular support for form validation and then how we can carry out form validation, and then show error messages to the user in the views. HTML5 already comes with some built-in support for form validation. But when we are using Angular for our application, we have to first turn off the HTML5 form validation, so that the responsibility of doing form validation is transferred over to the Angular application. So, to do that for the form, as we have seen in the exercise earlier, we include the novalidate attribute to the form tag there, so that this ensures that the angular takes over the responsibility of doing form validation. How does Angular help us to do form validation? That is what we will examine in more detail next. Whenever you need to do form validation in Angular, especially when you need to reference to the form fields within your template, then you need the help of Angular template reference variables. How do we specify a template reference variable? The template reference variable can be specified for any element by associating a template variable like this. For example, in this case for form, we are specifying the login form equal to ngForm. Similarly, for an input field for example, you would say slash, or rather #username is equal to ngModel. In this case, the login form and the user name are all template reference variables. These template reference variables can then be used within our Angular template to reference to these fields. So, in the template itself, you can check the control states for those fields including things like whether the field is valid, whether it is dirty, or it has some errors. We will leverage this support that Angular provides in order to do form validation. As I mentioned, we will be leveraging the template reference variables to gather the control state to check for information. So, for example, you can say username.pristine within your template. So, that refers to checking for the state, whether the particular control is in the pristine state, meaning that it has not been touched and modified by the user so far. The dirty is opposite of pristine, which means that when a field is dirty, then that means that the field has been modified by the user in the past. Similarly, the valid and invalid control state enables us to check whether the information within that field is valid or not valid, depending on the specification of your check for the validity or the invalid state of that particular field. So, for example, you can check if you declared a field as required, that means that you expected the user to type in at least some information into the field. The absence of information within the field in your form means that the field is invalid. Similarly, you can specify the mainland or the max length of a field value, so that you can easily check whether the number of characters within a field is about the main length, or below the max length, and so on. In the exercise that follows, we will apply these various form validation approaches for our template-driven form that we have designed in the previous exercise. As an example, in your form, you can disable the submit button by checking to see if that form is in the valid state or not. So in this case, you will associate the disabled and set it equal to the login form.form.invalid, means that when the form is invalid, this button will be disabled in this case. So, the user will not be allowed to submit the information through this particular form. So, this is one way of ensure that incorrect entries will not be submitted by the user through the form. Similarly, for specific fields, you can check to see whether the field has been filled or not. So, if you specify that a particular field is required by specifying the required attribute for the input field, then you can check to see whether there is an error of the required type raised for the particular field element there. So, in your code for example, you can even specify to inform the user about the fact that a particular field is incorrect. You use the mat-error to signify that. So, the mat-error tag, which comes from, again, the Angular material form support as you see here, if the ngIf turns out to be true, then that message will be displayed below in the input field there, and similar to the input field, will be marked as red in the screen. So, this is something that you're going to be checking and ensuring and also delivering error messages to the user. In the exercise that follows, we will apply this approach to check the username and the password. We'll specify that these fields are required and if the user does not type in any information into these fields after the field has been touched, then we will ensure that the appropriate error message is displayed to the user. So, with this quick understanding of form validation in Angular, let's move on to the exercise, where we will check out how we can do simple form validation for our login form and then be able to display error messages. We'll again come back to form validation in one of the later exercises, after we have learned more about reactive support in Angular.
