Why validation and state tracking matter
For validation and providing appropriate visual feedback is very important. Over the next couple of videos let's take a look at validation in template driven forms. Let's begin by understanding how Angular helps us with form validation by tracking the state of the form controls and applying the appropriate classes. I've got the snapshot from Angular docs which points very clearly what class is applied to a form control based on its state and validity at any point in time.
Angular's state and validity classes
Angular applies three classes to a form control based on its state. The first pair of classes you see here are dependent on whether the user has visited the form control or not. When you load a form for the very first time you have not yet visited a form field, so Angular applies a class of ng-untouched. If you visit the form control either by clicking or tapping and then navigating away from the form control, Angular applies a class of ng-touched. The key point here is that the class will change only on blur. You have to navigate away from the form control. So if the form control has been visited, an ng-touched class is applied; if not, an ng-untouched class is going to be applied. On similar lines Angular also tracks if the value of the form control has changed or not. Again, when you load a form for the very first time the value has not yet changed, so Angular applies a class of ng-pristine. If you do change the value of the form control Angular applies a class of ng-dirty. For example, when you start typing a value into the input field the class changes from ng-pristine to ng-dirty. And the final pair of classes is concerned with the validity of the form control. If the form control's value is valid an ng-valid class is applied; if not, ng-invalid is applied. For example, if an input field contains the required attribute it implies that a value has to be entered. If a value is missing, ng-invalid class is applied and when a value is entered ng-valid class is going to be applied.
Let's take a look at these classes in our enrollment form. I'm going to go back to Visual Studio Code and over here to the name input element I am going to add a template reference variable called name. And then instead of binding to the form data — so let's remove that — I am going to bind to the input class name property. So name which is the reference variable dot className. Let's save this and take a look at the browser. You can see right away that the classes being applied to the input element are displayed. We have form-control which is the Bootstrap class that we have applied, so ignoring that you can see we have three other classes applied to the name input element: ng-untouched and ng-pristine and ng-valid. All three are from Angular. ng-untouched is based on whether the form field has been visited or not; on page load the form field has not been visited and hence Angular applies a class of ng-untouched. Now when I click on the input element you can see that the class doesn't change even though the input element has been visited; however on blur the class does change. When I tab out you can see that ng-untouched is now changed to ng-touched.
Demo: Pristine, dirty, valid and invalid changes
Similarly we have ng-pristine and ng-dirty based on whether the value of the form field has changed or not. On page load the value hasn't changed so Angular applies ng-pristine. If I change the value to Robo you can see that ng-pristine now changes to ng-dirty. And finally Angular applies ng-valid or ng-invalid classes based on the form field's validity. Now to test this we need some sort of a rule on the input element, so I'm going to add the required attribute. If you go back to the browser you can see the class ng-valid is applied which makes perfect sense because there is a value already entered. If I however clear out the value you can see that ng-valid changes to an ng-invalid. So as you can see Angular tries to help us out with form validation by applying the appropriate classes to the form controls.
Using ngModel properties instead of classes
Now although these classes can be used to provide visual feedback, Angular also provides an alternative which I feel is better as well. For each of the classes Angular provides an associated property on the ngModel directive. The property is basically the same as the class with the ng- removed. ng-untouched has an associated property on the ngModel which is untouched, ng-touched has touched, ng-pristine has pristine and similarly the other classes. So let's quickly take a look at these properties in our enrollment form. Now the question is how do we get access to the ngModel properties? The answer is by simply creating a reference to the ngModel directive. Right now the name template reference variable points to the input element in the DOM; by assigning it a value of ngModel the reference variable now points to the ngModel of this particular form control. So now that we have a reference to ngModel we can easily bind to the different properties. Let's start with untouched, so name.untouched. Save this and head to the browser and you can see that the property is set to true. If I click inside and then blur you can see that it changes to false. Similarly let's take a look at pristine, so name.pristine. Go back to the browser: on page load it's true and altering the value is going to set it to false. Finally we also have the valid property, so name.valid. The input field has a value and hence the property is true; clear it out and you can see that it changes to false.
Conclusions and next steps
So you can see that the properties return a boolean value which is much easier to work with than class names. But I wanted to make sure you understand the different ways Angular helps us track the state and validity of form controls. In the next video let's see how the ngModel properties can be utilized to provide visual feedback to the user as they are filling out a form. I'll see you guys in the next video.
