Adding Specific Validations to form in Angular

Introduction

Validation is crucial to have proper data and safeguard the application from malicious users. We can perform client-side validation by showing specific errors to users. Showing errors will help users to enter the data correctly at one go itself. A form with proper data is safe from security vulnerabilities also. Validations ensure that data is correct and clean. Adding form validations for all fields is a good practice to avoid raw unnecessary data to enter into the database. Accuracy and Usability are the mere concerns behind applying user validations. In form, it is necessary to ensure that the user is entering the correct field type. Showing messages to users for each input field is mandatory to ensure useful data. We will see how we add validation to forms.

Adding Validations 

Suppose we have a form as follows:

<form>
<div class="form-group">
<label for="name">Name</label>
<input id="name" [(ngModel)]="EmpName" required #EmpName="ngModel" type="text" class="form-control">
</div>
<button class="btn btn-primary">Submit</button>
</form>

Now we will add validation in our input field that this is a required field. If the user skips this field after focus, we need to show an error that name is a required field. How to do that?
We will add an error message for this using FormControl instance. The form control instance empName has various controls associated with it. Some are defined below:
  • Valid - This is true if all the controls in the form are valid. It's the state of the validity of all form-controls.
  • Invalid - It is the opposite of valid. True if any form input control is invalid.
  • Pristine - True if no field is modified yet. It conveys about the cleanliness of the form.
  • Dirty - Opposite of pristine. True if some control is modified.
  • Touched - If any field is touched yet or not. True if touched. 
  • Untouched - Opposite of untouched. 
<form>
<div class="form-group">
<label for="name">Name</label>
<input id="name" [(ngModel)]="empName" #empName="ngModel" type="text" class="form-control">
<div class="alert alert-danger" *ngIf="!empName.valid && empName.touched">Name is a required field</div>
</div>
<button class="btn btn-primary">Submit</button>
</form>

We have added an additional div to show the error message. This div has bootstrap classes alert and alert-danger to show the error with nice look and feel. 

  • If the field is focused by the user means empName.touched is true. 
  • If the user left the field blank means empName.valid is false. 

If both above-mentioned conditions are met a validation error will be shown to the user.

Adding Specific Validation Errors

Suppose we have an input field that has various validations like minlength, maxlength, pattern, required, etc. How to show specific error messages for different validations?
The form control instance of any form field has a property called errors. In this property, we can check which errors are present in our field. It has key-value pairs in which keys are validation errors. So we can use this error property to show the specific validation messages to the user. Multiple validation attributes are handled as follows:

<form>
<div class="form-group">
<label for="name">Name</label>
<input id="name" [(ngModel)]="EmpName" #EmpName="ngModel" type="text" class="form-control" minlength="3" maxlength="10" pattern="Vedansh" >
<div class="alert alert-danger" *ngIf="!EmpName.errors.minlength">Name should be atleast 3 characters.</div>
<div class="alert alert-danger" *ngIf="!EmpName.errors.required">Name is required</div>
</div>
<div class="alert alert-danger" *ngIf="!EmpName.errors.pattern">Name should match the pattern</div>
</div>
<button class="btn btn-primary">Submit</button>
</form>

Comments