Validation In Controls With Visual Interaction

Introduction

 

In this article, we will see how the form fields are validated by applying the appropriate class for visually indicating its validation. We can use our own class for giving the styles to apply to the form control or we can use the CSS framework provided by validation classes. We will use the predefined classes of bootstrap for applying the class for now.

 

Prerequisites

• Knowledge of the basics of Angular class and components

 

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 for name control.

<div class="form-group">
              <label for="name">Name:</label>
              <input type="text" #controlName='ngModel' required [class.is-invalid]="controlName.invalid" class="form-control" [(ngModel)]="studentModel.name" name="name">
            </div>

Run the application and you will see that the field has been marked as required on the very initial load.

 

 

Look at the field ‘Name’; it has been marked as required. User must interact to the particular control before showing its valid/invalid/required kind of experience.

 

Modify the above control statements with below given HTML statement.

<div class="form-group">
              <label for="name">Name:</label>
              <input type="text" #controlName='ngModel' required [class.is-invalid]="controlName.invalid && controlName.touched" class="form-control" [ngModel]="studentModel.name" name="name">
            </div>

Now, run the application.

 

 

This now looks normal on initial. Once you click/touch and give invalid value or leave it blank, then only it will apply the invalid class to the control.

 

We can have a pattern matching validation. We can create any type of pattern matching that our form control must satisfy. Pattern matching can be applied for the phone number, pin code, password with at least 1 special char, and so on.

 

Let us take an example of a phone number that is having the pattern of 10 digits.

 

Change the phone section HTML code with the below given lines of code.

<div class="col-sm-4">
          <div class="form-group">
              <label for="phone">Phone:</label>
              <input type="tel" #controlPhone="ngModel" required pattern="^\d{10}$" [class.is-invalid]="controlPhone.invalid && controlPhone.touched" class="form-control" [(ngModel)]="studentModel.phone" name="phone">
            </div>
      </div>

Now, the validation is applied. Once you touch the control, the validation will only be successful if it is matching the pattern, i.e., 10 digits phone number is given.

 

Otherwise, the invalid class will be applied.

 

 

You can see the border is applied as red indicating invalid values for the desired control.

 

This is how we can define field validation in template-driven forms using the ngModel and class property that are applied conditionally.

Let us try to give the appropriate error messages if the user gives invalid value.

 

In our first field ‘Name’, the field is put as required. So, let us add an error message if found blank or invalid.

 

Add the below HTML statements for ‘Name’ control.

<div class="form-group">
          <label for="name">Name:</label>
          <input type="text" #controlName='ngModel' required [class.is-invalid]="controlName.invalid && controlName.touched" class="form-control" [(ngModel)]="studentModel.name" name="name">
          <small [class.d-none]="controlName.valid || controlName.untouched"  "  class="text-danger">*Field is required</small>
        </div>

 

Once you click and leave it blank, it will show you the proper validation message.

 

 

Let us add the validation message for the field ‘Phone’.

 

Change the below set of HTML statements for ‘phone’ control.

<div class="form-group">
              <label for="phone">Phone:</label>
              <input type="tel" #controlPhone="ngModel" required pattern="^\d{10}$" [class.is-invalid]="controlPhone.invalid && controlPhone.touched" class="form-control" [(ngModel)]="studentModel.phone" name="phone">
              <small [class.d-none]="controlPhone.valid || controlPhone.untouched"  class="text-danger">*Must be 10 digit</small>
            </div>

Run the application and click and give invalid value to phone control.

 

 

Let us try to use the error property on the ngModel.

 

Replace the code for ‘Phone’ Control.

<div class="form-group">
              <label for="phone">Phone:</label>
              <input type="tel" #controlPhone="ngModel" required pattern="^\d{10}$" [class.is-invalid]="controlPhone.invalid && controlPhone.touched" class="form-control" [(ngModel)]="studentModel.phone" name="phone" />
              <div *ngIf="controlPhone.errors && (controlPhone.invalid || controlPhone.touched)">
                <small *ngIf="controlPhone.errors.required" class="text-danger">*This field is required</small>
                <small *ngIf="controlPhone.errors.pattern" class="text-danger">*Must be 10 digit</small>
              </div>
            </div>

We can use ngModel name to check whether errors are occurred or not. Also, we can go and check the type of error that occurred.

 

In above code statements, you can see we have done the check for two types of error (required and pattern) that will be applied based on the type of error.

 

 

The error message will only be rendered once the error occurred.

 

Validation message in Select control

 

We will use ngModel property to apply the class and display validation message if the user is not selecting the value from the select control.

 

Just apply the html code below,

<div class="form-group">
                <label for="bloodGroup">Blood Group:</label>
                <select required #bloodGroup="ngModel" value="Select" class="form-control" [class.is-invalid]="bloodGroup.invalid && bloodGroup.touched" [(ngModel)]="studentModel.bloodGroup" name="bloodGroup">
                  <option value="">Select Blood Group</option>
                  <option *ngFor="let group of groups" >{{group}}</option>
                </select>
              <small class="text-danger" *ngIf="bloodGroup.invalid && bloodGroup.touched">*Please select Blood group</small>
              </div>

This works the same and the validation will work as below if we are not selecting the appropriate value,

 

 

This is how you can apply the invalid class if the select control is touched and you're not selecting a valid value from it.