State And Validation Tracking In Angular

Introduction

 

In this article, we will see how Angular tracks the state of the form control and applies the necessary class that helps us know what validation has been applied. Validation and applying the appropriate visual feedback for the controls are very important for any application. Now, let us see how Angular applies the class based on the state of control and validity.

 

Prerequisites

 

Basic knowledge of Angular classes and components.

 

Angular provides three pairs of classes at any point of the state of the control.

 

ng-touched and ng-untouched

This pair of classes defines the state of the control whether it has been touched or not.

 

ng-touched will be applied if the condition is true and ng-untouched will be applied if false.

 

ng-dirty and ng-pristine

This pair of classes defines the state of the control whether its value has been changed or not.

 

ng-dirty will be applied if the condition is true and ng-pristine will be applied if false.

 

ng-valid and ng-invalid

This pair of classes defines the state of the control whether its value is valid or not.

 

ng-valid will be applied if the condition is true and ng-invalid will be applied if false.

 

Let’s see how these classes apply to our application by giving the necessary state.

 

Before we start to see how the classes are being applied, click here to create the sample application on which we will see how the classes are being applied.

 

Open app.component.html and modify the below set of HTML code. 

<div class="col-sm-4">
          <div class="form-group">
              <label for="name">Name:</label>
              <input type="text" #controlName class="form-control" [ngModel]="studentModel.name" name="name">
            </div>
            <div>
              <b>class applied on 'Name' control : <i>{{controlName.className}}</i></b>
            </div>
      </div>

Reference the variable #controlName for the control ‘Name’ and echo the classes applied on the same control.

1. Applied ng-touched and ng-untouched classes.
   Run the application and see the classes applied on ‘name’ control.
   
   
   
   ng-untouched is applied because the control has not been visited. We didn’t touch the control yet.
   
   When you just click on the control and move to any other, then the ng-touched class will be applied.
   
   

2. Applied ng-dirty and ng-pristine classes.
   When we load the form classes ‘form-control ng-untouched ng-prestine ng-valid’ classes has been applied.
   
   When you focus and edit some values then the ng-prestine class will be removed and ng-dirty will be applied.

4. Applied ng-valid and ng-invalid classes.
   
   These two classes will be applied on the basis of value whether it’s valid or invalid.
   
   Let’s add a simple required attribute to make the field value valid/invalid.
   

   <input type="text" #controlName required class="form-control [ngModel]="studentModel.name" name="name">

Run the application.

 

Focus to the control ‘name’ and delete the value or make the value blank for the control.

 

 

We can apply different validation based on value, email, phone number, pincode etc.

 

For each of the classes, Angular provides an associative Angular property on the ng model directives. The ngModel properties are as follows:

 

Class	Property
ng-untouched	untouched
ng-touched	touched
ng-prestine	pristine
ng-dirty	dirty
ng-valid	valid
ng-invalid	invalid

 

We can access these properties with the help of ngModel directive reference.

 

Add the below set of code and save the changes. 

<div class="col-sm-4">
          <div class="form-group">
              <label for="name">Name:</label>
              <input type="text" #controlName='ngModel' required class="form-control" [ngModel]="studentModel.name" name="name">
            </div>
            <div>
              <b>class applied on 'Name' control 'touched' : <i>{{controlName.touched}}</i></b><br>
              <b>class applied on 'Name' control 'untouched' : <i>{{controlName.untouched}}</i></b><br>
              <b>class applied on 'Name' control 'pristine' : <i>{{controlName.pristine}}</i></b><br>
              <b>class applied on 'Name' control 'dirty' : <i>{{controlName.dirty}}</i></b><br>
              <b>class applied on 'Name' control 'valid' : <i>{{controlName.valid}}</i></b><br>
              <b>class applied on 'Name' control 'invalid' : <i>{{controlName.invalid}}</i></b>
            </div>
      </div>

Run the application.

 

 

You can see the property return the Boolean value and it is much better to work with applied classes than the class name.