Learn About Reactive Forms In Angular

Introduction

 

In Angular, the reactive forms are use to create the forms in which the code and logic resides in the component class. Unlike Template-driven forms where more focus is on HTML templates, we focus on component for logics. We can perform Two way binding in Template driven forms but there is no two way binding in Reactive forms. Angular provides the methods to update the values from the component class.

 

Reactive forms are used on complex cases, like dynamic forms element, dynamic validations etc.

 

Prerequisites

• HTML, CSS, and JS
• Basics of angular

Implementation

 

Let us create a simple application that utilizes Reactive forms.

 

Create a TestApp project using Angular CLI.

 

Create a test component which will contain the forms and related field:

 

Open test.component.html and add the below contents:

<div class="container-fluid">
    <h3>Registration Form</h3>
    <form>
        <div class="form-group">
            <label>UserName</label>
            <input type="text" class="form-control">
        </div>
        <div class="form-group">
            <label>Password</label>
            <input type="Password" class="form-control">
        </div>
        <div class="form-group">
            <label>Email Address</label>
            <input type="email" class="form-control">
        </div>
        <div class="form-group">
            <label>Phone</label>
            <input type="Phone" class="form-control">
        </div>
        <button class="btn btn-primary" type="submit">Register</button>
    </form>
</div>

Open app.module.ts and edit with the below contents,

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

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

Basically we have imported ReactiveFormsModule and added it to imports array.

 

ReactiveFormsModule comes with a lot of classes and directives that are necessary to create the Reactive Forms.

 

Two classes are used to build up the Reactive forms,

1. FormGroup
2. FormControl

Form is represented by a model in the component class.

 

In our form under test.component.html there are four fields UserName, Password, Email Address, Phone. These fields are the instance of FormControl. And overall all the FormControl are defined as the instance of FormGroup class.

 

So overall form is represented as FormGroup and each field is represented as FormControl in the component.

 

Now open test.component.ts and edit with below contents,

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  registrationForm: any;
  constructor() { }


  ngOnInit() {
    this.registrationForm= new FormGroup({
     userName : new FormControl('Irshad'),
     password : new FormControl(''),
     email : new FormControl(''),
     phone : new FormControl('')
   });
  }
}

Open app.component.html and edit with the below contents,

 

Basically we are trying to bind the FormGroup “registrationForm” to our html Form and the form control to the corresponding html element in form.

<div class="container-fluid">
    <h3>Registration Form</h3>
    <form [formGroup]="registrationForm">
        <div class="form-group">
            <label>UserName</label>
            <input formControlName="userName" type="text" class="form-control">
        </div>
        <div class="form-group">
            <label>Password</label>
            <input formControlName="password" type="Password" class="form-control">
        </div>
        <div class="form-group">
            <label>Email Address</label>
            <input formControlName="email" type="email" class="form-control">
        </div>
        <div class="form-group">
            <label>Phone</label>
            <input formControlName="phone" type="Phone" class="form-control">
        </div>
        <button class="btn btn-primary" type="submit">Register</button>
    </form>
    {{registrationForm.value | json}}
</div>

The entire form will be associated with the formGroup registrationForm and the corresponding formControls from the model is associated with the element in html.

 

So we are done with creating the reactive form.

 

Run the application,

 

 

You can see the fields are getting bound with the corresponding component’s declared registrationForm and all the fields are getting bound properly.

 

Also, we have to display the values via interpolation with JSON pipe notation.

 

Thank you.