Angular 5 Reactive Forms And Validations

As we have seen in the last article, there are two types of form development approach that we use in Angular 5. The first one is template-driven and the other one is the reactive forms approach. Let us explore what are reactive forms and how to validate these in Angular 5.

What are reactive forms?

This approach uses the Reactive forms for developing the forms which favor the explicit management of data between the UI and the Model. With this approach, we create the tree of Angular form controls and bind them in the native form controls. As we can create the form controls directly in the component, it makes it a bit easier to push the data between the data models and the UI elements.

Initial imports for using reactive forms

To begin using the reactive forms, we must ensure that we are importing the proper references in the project and at the right location. Before we start, let’s add the new component using this command in the command prompt.

ng g c [name of component]

 

In this, I have added the component in my code. The name of the component is ReactiveDemoComponent. Okay. After adding the component, the first import we need to do is our bootstrap module or application module (i.e.app. module.ts). The code snippet for that is as shown below.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms'
import { AppComponent } from './app.component';
import { ReactiveDemoComponent } from './reactive-demo/reactive-demo.component';

@NgModule({
  declarations: [
    AppComponent,
    ReactiveDemoComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In this, what we have done is that we have imported the ReactiveFormsModule and added that module in the imports array. The next change we need to do is in the component, where we simply add these 3 packages in the import section.

import { Component, OnInit } from '@angular/core';
import {FormGroup,FormControl,FormBuilder} from '@angular/forms'
@Component({
  selector: 'app-reactive-demo',
  templateUrl: './reactive-demo.component.html',
  styleUrls: ['./reactive-demo.component.css']
})
export class ReactiveDemoComponent implements OnInit {
                   constructor() { }
                  ngOnInit() {}}

To sum up, we have 2 basic steps -

1. Import ReactiveFormsModule in the application module and add it in import array.
2. import the formgroup,formcontrol and FormBuilder classes to the component.

FormControl

It tracks the value of the controls and validates the individual control in the form.

FormGroup

Tracks the validity and state of the group of FormControl Instance or moreover, we can say the formgroup to be a collection of FormControls.

FormBuilder

This helps us to develop the forms along with their initial value and there validations.

Designing the component code

Now, we know the basics of the formcontrol, formgroup, and formbuilder. Let us design the form in the component snippet. For that, the code can be like below.

import { Component, OnInit } from '@angular/core';
import {FormBuilder,FormGroup,FormControl,Validators,NgForm} from '@angular/forms'
@Component({
  selector: 'app-reactive-demo',
  templateUrl: './reactive-demo.component.html',
  styleUrls: ['./reactive-demo.component.css']
})
export class ReactiveDemoComponent implements OnInit {
signupForm:FormGroup;
FirstName:string="";
LastName:string="";
Email:string="";
Password:string="";
constructor(private frmbuilder:FormBuilder)
   {

    this.signupForm=frmbuilder.group({
    fname:new FormControl(),
    lname:new FormControl(),
    Emailid:new FormControl(),
    userpassword:new FormControl()
    });
   }
  ngOnInit() {
  }
  PostData(signupForm:NgForm)
  {
    console.log(signupForm.controls);
  }

}

In the above code, we have designed our form in the component. As we know, in the reactive forms approach, we design the forms in the template and then do the bindings for the HTML.

What we have done in this code is -

1. We have declared the FormGroup property and named it signupForm in the component.
2. In Constructor, we are using the dependency injection to use the formbuilder.
   
   this.signupForm=frmbuilder.group(Formcontrols collection)
   
   This line of code takes the form control collection and groups into the formbuilder.
   
   
3. The next portion is to define the controls in the formbuilder and group them to assign it to the signupform form.
   
   fname:new FormControl(),

Here, we are declaring the fname to be of type FormControl() and assigning to the fname property which will be our form control name in the HTML. Here, we can specify the initial value of our form controller and add some validators in it (we can see that in the next section).

This is all of the above code. Now, it’s time to tie up these controls in the component to our template, i.e., our HTML. Let’s just check the following snippet.

<div>
  <form [formGroup]='signupForm' (ngSubmit)="PostData(signupForm)">
      <div class="form-container">
          <div class="row columns">
   <div>
    <input type="text" formControlName='fname' placeholder="Your First name">
    </div>
    <div>
    <br>
    <input type="text" formControlName='lname' placeholder="Your Last name">
  </div>
    <br>
    <div><input type="text" formControlName='Emailid' placeholder="Your Email id"></div>
    <br>
    <div>
    <input type="Password" formControlName='userpassword' placeholder="Your password">
  </div>
  <br>
  <div>
<input type="Submit" value="Post Data" >
  </div>
  </div>
  </div>
  </form>
</div>

In these, we have two things to keep in mind in order to understand how binding of the controls takes place.

<form [formGroup]='signupForm' (ngSubmit)="PostData(signupForm)">

1. In above code, we are binding the signupform to the formGroup directive
   
   
2. Now, we have linked the signupform to the formgroup we can access the formcontrol values inside the template
   
   
3. <input type="text" formControlName='fname' placeholder="Your First name">
   
   We have used the formControlName directive to map the element in the template to the property in the component

4. We are using Angular ngSubmit directive to the post data method in the component which will be called on Button click which logs all the values of the Form Controls In the Template

Validations with Reactive forms

Now, the most important part of any form is to add the validations in the application. Let’s see how we can add the validation in the form. For that, let's check the formcontrol in the component.

When we do the fname:new FormControl(), the first argument in the FormControl is the initial value and the second value is the Validations that we can add there.

The only change in the component would be like below.

this.signupForm= frmbuilder.group({
  fname:['',Validators.compose([Validators.required,Validators.maxLength(15),Validators.minLength(1)])],
  lname:['',[Validators.required,Validators.maxLength(19)]],
  Emailid:['',[Validators.required,Validators.email]],
  userpassword:['',Validators.required]
})

Here, we are adding the Validators for the fields in the application. As we know, there can be more than one validations for the controls so we can add them in two ways - first, for single validations, we can use single validator and for the multiple validations, we can use the Validators.compose(list of validators separated by ,).

Showing the Error Message

<div>
  <form [formGroup]='signupForm' (ngSubmit)="PostData(signupForm)">
      <div class="form-container">
          <div class="row columns">
   <div>
    <input type="text" formControlName='fname' name='fname' id='fname' placeholder="Your First name">

    <div *ngIf="signupForm.controls['fname'].touched && !signupForm.controls['fname'].valid">
        <span *ngIf="signupForm.controls['fname'].hasError('required') ">
            First name is required
            </span>
            <span *ngIf="signupForm.controls['fname'].hasError('minlength') ">
             Min length is 1
            </span>
            <span *ngIf="signupForm.controls['fname'].hasError('maxlength') ">
            max length is 15
        </span>
    </div>
    </div>
    <div>
    <br>
    <input type="text" formControlName='lname' placeholder="Your Last name">

    <div *ngIf="signupForm.controls['lname'].touched && !signupForm.controls['lname'].valid">
        <span *ngIf="signupForm.controls['lname'].hasError('required') ">
            Last name is required
            </span>
            <span *ngIf="signupForm.controls['lname'].hasError('minlength') ">
             Min length is 1
            </span>
            <span *ngIf="signupForm.controls['lname'].hasError('maxlength') ">
            max length is 15
        </span>
    </div>
  </div>
    <br>
    <div><input type="text" formControlName='Emailid' placeholder="Your Email id"></div>
    <div *ngIf="signupForm.controls['Emailid'].touched && !signupForm.controls['Emailid'].valid">
        <span *ngIf="signupForm.controls['Emailid'].hasError('required') ">
           Email ID is needed
             </span>

      <span *ngIf="signupForm.controls['Emailid'].hasError('email') ">
           Invalid Email ID
            </span>

    </div>
    <br>
    <div>
    <input type="Password" formControlName='userpassword' placeholder="Your password">
  </div>
  <br>
  <div>
<input type="Submit" value="Post Data" [disabled]='!signupForm.valid' >
  </div>
  </div>
  </div>
  </form>
</div>

In the above code snippet, we are showing the error messages when the field is touched and entered value.

<div *ngIf="signupForm.controls['fname'].touched && !signupForm.controls['fname'].valid">
     <span *ngIf="signupForm.controls['fname'].hasError('required') ">
         First name is required
         </span>
         <span *ngIf="signupForm.controls['fname'].hasError('minlength') ">
          Min length is 1
         </span>
         <span *ngIf="signupForm.controls['fname'].hasError('maxlength') ">
         max length is 15
     </span>    </div>

Here, we have listed all the validators that we have applied in the component. To check if the control is failing any validation, we have added the code.

<div *ngIf="signupForm.controls['fname'].touched && !signupForm.controls['fname'].valid">

This div will be displayed only if the fname is touched and it is valid. In that div, we have other section to display the errors, such as -required and min length and max length. We use ngIf directive here to display the proper error messages.

This was all about the Reactive forms and their validation.

References

1. Angular official site(https:\\Angular.io\)
2. https:\\Rangle.io\