Validations In Reactive Forms In Angular

The Code Points
0

Validations In Reactive Forms In Angular

The Code Points 0 14

In this article, We will learn how angular reactive forms validation works. Validation is one of the most common tasks undertaken when creating a form. We will demonstrate how to create Reactive Forms and use built-in validators. In the following article, We will learn how to use Reactive Forms to develop custom validators.

In the Template-driven Forms article, we looked at how validation works. The majority of the principles covered in that tutorial apply here as well.

Validators in Reactive Forms

What is a Validator

A Validator is a function that checks and returns a list of errors for a FormControl, FormGroup, or FormArray instance. Validation has passed if the Validator returns a null value.

How to add a Validator to Reactive Forms

The validators are set as the second and third arguments in the component class's FormControl, FormGroup, or FormArray. A collection of sync validators is the second argument, and a collection of async validators is the third.

Validation is performed and results are returned promptly by sync validators. If no errors are discovered, they either return null or a list of errors.

Validators that are asynchronous: return a Promise or an Observable. If no errors are discovered, they either return null or a list of errors.

Built-in Validators

The Angular ReactiveForms Module comes with a number of built-in validators. They are required, including minlength, maxlength, and pattern, among other things.

Reactive Forms Validation Example

In the previous tutorial, W learned how to develop Angular Reactive Forms. To that example, we'll now add some of the built-in validators.

Model

The contactForm model from the last instruction is shown here.

  1. contactForm = new FormGroup({
  2.   firstname: new FormControl(''),
  3.   lastname: new FormControl(''),
  4.   email:new FormControl(''),
  5.   gender: new FormControl(''),
  6.   isMarried: new FormControl(''),
  7.   country: new FormControl(''),
  8.   address:new FormGroup({
  9.     city: new FormControl(''),
  10.     street: new FormControl(''),
  11.     pincode:new FormControl('')
  12.   })
  13. })

Disabling the Browser validation

To begin, we'll disable the browser validator by adding the novalidate attribute to the <form> element, as shown below. If this attribute is present, the form will not be validated when it is submitted using the built-in HTML5 validation.

  1. <form contactform="" formgroup="" ngsubmit="" novalidate="" onsubmit="">

Adding in Built-in Validators

As previously said, Angular comes with multiple built-in validators out of the box.

Required Validator

The necessary validator is a sync validator, which returns true only if a non-empty value is entered in the formcontrol. The Sync Validator is given as the FormControl's second argument.

  1. firstname: new FormControl('',[Validators.required]),

Minlength Validator

The control value for the Minlength validator must not be fewer than the amount of characters given in the validator.

The minlength validator, for example, verifies that the firstname value has at least 10 characters.

  1. firstname: new FormControl('',[Validators.required,Validators.minLength(10)]),

Maxlength Validator

The amount of characters in this Validator must not exceed the value set in the validator.

  1. lastname: new FormControl('',[Validators.maxLength(15)]),

Pattern Validator

The control value must match the regex pattern specified in the property for this Validator to work. The pattern [a-zA-Z]+$, for example, ensures that only letters are allowed (even spaces are not allowed). Let's put this pattern to work on the lastName.

  1. lastname: new FormControl('',[Validators.maxLength(15), Validators.pattern("^[a-zA-Z]+$")]),

Email Validator

The control value for this Validator must be a genuine email address. This is what we do with the email field.

  1. email:new FormControl('',[Validators.email,Validators.required]),

Our final contactForm will look like this after we've added all of the validators.

  1. contactForm = new FormGroup({
  2.   firstname: new FormControl('',[Validators.required,Validators.minLength(10)]),
  3.   lastname: new FormControl('',[Validators.required, Validators.maxLength(15), Validators.pattern("^[a-zA-Z]+$")]),
  4.   email:new FormControl('',[Validators.email,Validators.required]),
  5.   gender: new FormControl('',[Validators.required]),
  6.   isMarried: new FormControl('',[Validators.required]),
  7.   country: new FormControl('',[Validators.required]),
  8.   address:new FormGroup({
  9.     city: new FormControl('',[Validators.required]),
  10.     street: new FormControl('',[Validators.required]),
  11.     pincode:new FormControl('',[Validators.required])
  12.   })
  13. })

Disable Submit button

The validators have been successfully inserted. If our form isn't valid, we'll need to block the submit button.

The FormGroup, FormControl, and FormArray instances in the Angular Forms API expose the state of the forms. The valid attribute of the FormGroup control is set to true if all of its child controls are valid.

The top-level FormGroup is represented by the contactForm. It's used to disable the submit button's disabled property.

  1. <button contactform.valid="" disabled="" type="submit">Submit</button>

Displaying the Validation/Error messages

We must give the user with a concise and meaningful error message. This is accomplished by making use of the error object returned by the FormControl instance.

A FormControl instance is connected with each form element. It reveals the state of form elements such as valid, dirty, touched, and so on.

You can retrieve the reference to the FormControl in one of two methods.

The contactForm variable is one option. To check if the firstname is legitimate, we can use contactForm.controls.firstname.valid.

  1. <div ngif="!contactForm.controls.firstname?.valid && (contactForm.controls.firstname?.dirty
  2.   ||contactForm.controls.firstname?.touched)">
  3.     First Name is not valid
  4. </div>

Another option is to define a getter function in the component class for each FormControl instance.

  1. get firstname() {
  2.    return this.contactForm.get('firstname');
  3. }

and then use it as follows in the template

  1. <div ngif="!firstname.valid && (firstname.dirty ||firstname.touched)">
  2.     First Name is not valid
  3. </div>

Dirty & touched

We check for dirty and touched items in addition to eligible items. Because we don't want the program to show the error the first time the form is presented. Only after the user has attempted to change the value should errors be displayed. The dirty and touched properties help to do us.

dirty: If the user has changed the value in the UI, the control is dirty.
touched: If the user has triggered a blur event on a control, it is touched.

Error message

"First Name is not valid" is a useless error message. There are two validators for the firstname. minlength and needed

The errors object is updated with any errors generated by the unsuccessful validation. The errors object returns either the error object or null if no errors exist.
  1. <div ngif="!firstname?.valid && (firstname?.dirty ||firstname?.touched)">
  2.   <div firstname.errors.required="" hidden="">
  3.     First Name is required
  4.   </div>
  5.   <div firstname.errors.minlength="" hidden="">
  6.     Min Length is 10
  7.   </div>
  8. </div>

The following code is complete code of the app.component.ts file
  1. import { Component, ViewChild, ElementRef } from '@angular/core';
  2. import { FormGroup, FormControl, Validators } from '@angular/forms'
  3.  
  4.  
  5. @Component({
  6.   selector: 'app-root',
  7.   templateUrl: './app.component.html',
  8.   styleUrls: ['./app.component.css']
  9. })
  10. export class AppComponent {
  11.   title = 'Angular Reactive forms';
  12.  
  13.  
  14.   contactForm = new FormGroup({
  15.     firstname: new FormControl('',[Validators.required,Validators.minLength(10)]),
  16.     lastname: new FormControl('',[Validators.required, Validators.maxLength(15), Validators.pattern("^[a-zA-Z]+$")]),
  17.     email:new FormControl('',[Validators.email,Validators.required]),
  18.     gender: new FormControl('',[Validators.required]),
  19.     isMarried: new FormControl('',[Validators.required]),
  20.     country: new FormControl('',[Validators.required]),
  21.     address:new FormGroup({
  22.       city: new FormControl('',[Validators.required]),
  23.       street: new FormControl('',[Validators.required]),
  24.       pincode:new FormControl('',[Validators.required])
  25.     })
  26.   })
  27.  
  28.   get firstname() {
  29.     return this.contactForm.get('firstname');
  30.   } 
  31.  
  32.   get lastname() {
  33.     return this.contactForm.get('lastname');
  34.   } 
  35.  
  36.   get email() {
  37.     return this.contactForm.get('email');
  38.   } 
  39.  
  40.   get gender() {
  41.     return this.contactForm.get('gender');
  42.   } 
  43.  
  44.   get isMarried() {
  45.     return this.contactForm.get('isMarried');
  46.   } 
  47.  
  48.   get country() {
  49.     return this.contactForm.get('country');
  50.   } 
  51.  
  52.   get city() {
  53.     return this.contactForm.get("address").get('city');
  54.   } 
  55.  
  56.   get street() {
  57.     return this.contactForm.get("address").get('street');
  58.   } 
  59.  
  60.   get pincode() {
  61.     return this.contactForm.get("address").get('pincode');
  62.   } 
  63.  
  64.  
  65.   countryList: country[] = [
  66.     new country("1", "India"),
  67.     new country('2', 'USA'),
  68.     new country('3', 'England')
  69.   ];
  70.  
  71.  
  72.  
  73.  
  74.   onSubmit() {
  75.     console.log(this.contactForm.value);
  76.   }
  77.  
  78.  
  79.  
  80. }
  81.  
  82.  
  83. export class contact {
  84.   firstname:string;
  85.   lastname:string;
  86.   gender:string;
  87.   isMarried:boolean;
  88.   country:string;
  89.   address: {
  90.     city:string;
  91.     street:string;
  92.     pincode:string;
  93.   }
  94. } 
  95.  
  96.  
  97. export class country {
  98.   id: string;
  99.   name: string;
  100.  
  101.   constructor(id: string, name: string) {
  102.     this.id = id;
  103.     this.name = name;
  104.   }
  105. }

The following code is complete code of the app.component.html file
  1. <form [formGroup]="contactForm" (ngSubmit)="onSubmit()" novalidate>
  2.   <p>
  3.     <label>First Name </label>
  4.     <input formcontrolname="firstname" id="firstname" name="firstname" type="text" />
  5.   </p>
  6.  
  7.   <div ngif="!firstname?.valid && (firstname?.dirty ||firstname?.touched)">
  8.     <div firstname.errors.required="" hidden="">
  9.       First Name is required
  10.     </div>
  11.     <div firstname.errors.minlength="" hidden="">
  12.       Min Length is 10
  13.     </div>
  14.   </div>
  15.  
  16.   <p>
  17.     <label>Last Name </label>
  18.     <input formcontrolname="lastname" id="lastname" name="lastname" type="text" />
  19.   </p>
  20.  
  21.   <div ngif="!lastname.valid && (lastname.dirty ||lastname.touched)">
  22.     <div hidden="" lastname.errors.pattern="">
  23.       Only characters are allowed
  24.     </div>
  25.     <div hidden="" lastname.errors.maxlength="">
  26.       Max length allowed is {{lastname.errors.maxlength?.requiredLength}} 
  27.     </div>
  28.     <div hidden="" lastname.errors.required="">
  29.       Last Name is required
  30.     </div>
  31.   </div>
  32.  
  33.   <p>
  34.     <label>Email </label>
  35.     <input formcontrolname="email" id="email" name="email" type="text" />
  36.   </p>
  37.   <div ngif="!email.valid && (email.dirty ||email.touched)">
  38.     <div email.errors.required="" hidden="">
  39.       email is required
  40.     </div>
  41.     <div email.errors.email="" hidden="">
  42.       invalid email id
  43.     </div>
  44.   </div>
  45.  
  46.  
  47.   <p>
  48.     <label>Geneder </label>
  49.     <input formcontrolname="gender" id="gender" name="gender" type="radio" value="male" /> Male
  50.     <input formcontrolname="gender" id="gender" name="gender" type="radio" value="female" /> Female
  51.   </p>
  52.   <div ngif="!gender.valid && (gender.dirty ||gender.touched)">
  53.     <div gender.errors.required="" hidden="">
  54.       gender is required
  55.     </div>
  56.   </div>
  57.  
  58.   <p>
  59.     <label>Married </label>
  60.     <input formcontrolname="isMarried" id="isMarried" name="isMarried" type="checkbox" />
  61.   </p>
  62.   <div ngif="!isMarried.valid && (isMarried.dirty ||isMarried.touched)">
  63.     <div hidden="" ismarried.errors.required="">
  64.       isMarried is required
  65.     </div>
  66.   </div>
  67.  
  68.  
  69.   <p>
  70.     <label>country </label>
  71.     <select formcontrolname="country" id="country" name="country">
  72.       <option c.id="" ngfor="let c of countryList" ngvalue="">
  73.         {{c.name}}
  74.       </option>
  75.     </select>
  76.   </p>
  77.   <div ngif="!country.valid && (country.dirty ||country.touched)">
  78.     <div country.errors.required="" hidden="">
  79.       country is required
  80.     </div>
  81.   </div>
  82.  
  83.  
  84.  
  85.   <div formgroupname="address">
  86.  
  87.     <div class="form-group">
  88.       <label>City</label>
  89.       <input class="form-control" formcontrolname="city" name="city" type="text" />
  90.     </div>
  91.     <div ngif="!city.valid && (city.dirty ||city.touched)">
  92.       <div city.errors.required="" hidden="">
  93.         city is required
  94.       </div>
  95.     </div>
  96.  
  97.  
  98.     <div class="form-group">
  99.       <label>Street</label>
  100.       <input class="form-control" formcontrolname="street" name="street" type="text" />
  101.     </div>
  102.     <div ngif="!street.valid && (street.dirty ||street.touched)">
  103.       <div hidden="" street.errors.required="">
  104.         street is required
  105.       </div>
  106.     </div>
  107.  
  108.     <div class="form-group">
  109.       <label>Pin Code</label>
  110.       <input class="form-control" formcontrolname="pincode" name="pincode" type="text" />
  111.     </div>
  112.     <div ngif="!pincode.valid && (pincode.dirty ||pincode.touched)">
  113.       <div hidden="" pincode.errors.required="">
  114.         pincode is required
  115.       </div>
  116.     </div>
  117.  
  118.   </div>
  119.  
  120.   <p>{{contactForm.valid}} </p>
  121.  
  122.   <p>
  123.     <button contactform.valid="" disabled="" type="submit">Submit</button>
  124.   </p>
  125.  
  126.  
  127. </form>


Conclusion

We just learned how to validate Angular Reactive Forms.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in comment section.
Tags:

Post a Comment

Previous Post Next Post