Building Real World, Production Quality Apps with Angular 2

Learn To: Use FormBuilder to Create & Manage Forms


Introducing Reactive Angular2 Forms

Quite a few front-end web apps are form-intensive. Angular2 introduces a new way to create forms called Reactive Forms, aka Model-Driven forms. A few advantages of using Reactive Forms is that you can unit test the form validation logic, and tap into FormGroup and FormControl Observable-based API. Since they are Observables you are able to subscribe to the stream and use functional programming operators such as map, reduce, and filter to name a few.

Below is a simplified version of our login / register form. We have three FormControls: username, email, and password. These controls are grouped together in our formGroup called authForm.

// we set formGroup to authForm
<form [formGroup]="authForm" (ngSubmit)="submitForm()">

    <fieldset class="form-group">
            // set control name
            class="form-control form-control-lg"
            *ngIf="authType == 'register'" />

    <fieldset class="form-group">
            // set control name
            class="form-control form-control-lg"
            type="text" />

    <fieldset class="form-group">
            // set control name 
            class="form-control form-control-lg"
            type="password" />

    <button class="btn btn-lg btn-primary pull-xs-right" type="submit">


Below we create an instance of FormGroup and use FormBuilder to create a form group.

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

  selector: 'auth-page',
  templateUrl: './auth.component.html'
export class AuthComponent {
    // creates instance of FormGroup called authForm
  authForm: FormGroup;

    private fb: FormBuilder
  ) {
    // use FormBuilder to create a form group
    this.authForm ={
      'email': [' ', Validators.required ],
      'password': [' ', Validators.required ]

  submitForm() {
    let credentials = this.authForm.value;

This is a rather simple explanation and example meant as a quick introduction to Reactive forms. Feel free to check out Angular's tutorial on more complex forms!