Reactive Forms in Angular 2

Posted By Manisha Kirodiwal | 19-Nov-2017

Model-based forms/ Reactive forms allow us to test our forms without having to depend on end-to-end testing.

FormGroup and FormControl:

Let's start with a registration form example: Now to make form a model driven form, we need to create a form model which represents the DOM structure in the component. We can use the low-level Apis for FormGroup and FormControl.

FormGroup = A set of FormControls

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

  selector: 'my-app',
export class AppComponent {

  registerForm = new FormGroup({
    firstname: new FormControl(),
    lastname: new FormControl(),
    address: new FormGroup({
      street: new FormControl(),
      zip: new FormControl(),
      city: new FormControl()

Here we have created a component registerForm that represents FormGroup. For each field in the form, we have created a FormControl. FormGroup can be nested, as the address is a collection of form controls.


Binding forms using formGroup, formGroupName, and formControlName:


We will use formGroup directive to associate the model with our form. This directive takes an expression that evaluates to an instance of FormGroup.

First import ReactiveFormModule for directive.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@anglar/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';

  imports: [BrowserModule, ReactiveFormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
export class AppModule {}

Use formGroup to bind the model with the form template.


Each form control obtains an applied formControlName directive so that we can register the controls in the external form:




FormBuilder is high-level API which we can use to make our code more pleasant. It's like a factory which creates FormGroup’s and FormControl’s. Use .group() method after import FormBuilder.

import { FormBuilder, FormGroup } from '@angular/forms';

  selector: 'my-app',
export class AppComponent implements OnInit {

  registerForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.registerForm ={
      firstname: '',
      lastname: '',
        street: '',
        zip: '',
        city: ''

Forms with a single control:


FormControl directive does not have to be inside a formGroup.We can add it to a single form control as follows:

Here we can listen reactively for all the changes that are happening to the control.We can subscribe to valueChanges() observable property for each Form Control.

export class SearchComponent implements OnInit {

  searchControl = new FormControl();

  ngOnInit() {
    this.searchControl.valueChanges.subscribe(value => {
      // do something with value here
Request for Proposal

Recaptcha is required.

Sending message..