Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD
Build lego disney princess castle | Making princess castle | Sewing Unicorn | Build lego smoothie van | Solve frozen elsa puzzle | Taj mahal jigsaw puzzle | Statue of liberty jigsaw puzzle | Coloring a cat | Frozen elsa and anna jigsaw puzzle | Build lego disney princess castle | Making princess castle | Sewing Unicorn | Build lego smoothie van | Solve frozen elsa puzzle | Taj mahal jigsaw puzzle | Statue of liberty jigsaw puzzle | Coloring a cat | Frozen elsa and anna jigsaw puzzle

Angular reactive forms validation

Suggested Videos
Part 6 - Angular nested form groups | Text | Slides
Part 7 - Angular setvalue and patchvalue methods | Text | Slides
Part 8 - Angular formbuilder example | Text | Slides

In this video we will discuss implementing validation in a reactive form.


Here is what we want to do. We want to make Full Name 
1. Required and
2. The number of characters must be between 2 and 10


Step 1 - Import Angular Validators class : The first thing to do, when implementing validation in a reactive form is to import angular's Validators class. 

import { Validators } from '@angular/forms';

This class has the following validator functions

Function Description
required Validate that a field has a value. Used for required fields. For example, Name is required.
requiredTrue Validate that the field value is true. This validator is commonly used on a required checkbox. For example, "I Agree to the terms" checkbox must be checked to submit the form.
email Validate that the field value has a valid email pattern. For example, abc is not a valid email.
pattern Validate that the field value matches the specified regex pattern.
min Validate that the field value is greater than or equal to the provided number. For example, minimum age to vote is 18.
max Validate that the field value is less than or equal to the provided number. For example, people over the age of 90 are not eligible for this insurance policy.
minLength The number of characters in the field must be greater than or equal to the provided minimum length. For example, Full Name must be at least 3 characters.
maxLength The number of characters in the field must be less than or equal to the provided maximum length. For example, Description cannot exceed 500 characters.

Most of our validation requirements can be met using one or more of the following built-in validator functions. You can also write your own custom validator, if your requirements are not met using one of the above built-in validator functions. We will discuss, implementing a custom validator in a reactive form in our upcoming videos.

Step 2 - Specify the validators on the fullName Field : Notice, along with a default value of empty string, we are passing an array of validator functions. In our case 3 - required, minLength and maxLength.

this.employeeForm = this.fb.group({
  fullName: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(10)]],
  // OtherFields...
});

Step 3 - Modify the fullName field in the template to display validation error messages.

<div class="form-group"
      [ngClass]="{'has-error': ((employeeForm.get('fullName').touched ||
                                 employeeForm.get('fullName').dirty) &&
                                 employeeForm.get('fullName').errors)}">
  <label class="col-sm-2 control-label" for="fullName">Full Name</label>
  <div class="col-sm-8">
    <input id="fullName" type="text" class="form-control" formControlName="fullName">
    <span class="help-block"
          *ngIf="((employeeForm.get('fullName').touched ||
                   employeeForm.get('fullName').dirty) &&
                   employeeForm.get('fullName').errors)">
      <span *ngIf="employeeForm.get('fullName').errors.required">
        Full Name is required
      </span>
      <span *ngIf="employeeForm.get('fullName').errors.minlength ||
                   employeeForm.get('fullName').errors.maxlength">
          Full Name must be greater than 2 characters and less than 10 characters
      </span>
    </span>
  </div>
</div>

At the moment, the validation messages are still in the template HTML. In our upcoming videos, we will discuss, how to move them into the component class.

angular 6 tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.