Angular 4 Reactive Forms: Create An Angular 4 Form


Hello Techies,

Angular 4 Reactive forms is an Angular technique for creating Html forms with a reactive approach. This article will guide you for building reactive forms.
Basically, Angular provides two technologies for forms: reactive forms and template-driven forms, both belongs to the @angular/forms library. But they both have their own modules: ReactiveFormsModule and FormsModule.

At this point, let’s begin with Angular 4 Reactive Forms and create An Angular 4 Form using Reactive Forms Module.

Angular 4 Reactive Forms

Let’s start with Angular 4 Reactive Forms

Initially, set up the ng-forms

ng new ng-forms

For bootstrap, use below command in your project directory.

npm install --save bootstrap

Once it’s done, apply/add bootstrap css in your .angular-cli.json file. \project-path\ng-forms\.angular-cli.json

"styles": [

That’s it, you’ve set up successfully your first Angular 4 Reactive Form App. Now, let’s dive deeper.

In reactive forms, you create the entire form group and it’s controls in your App Component. You can immediately update a value or drill down through the dependents of the parent form because all controls are always available.

Firstly, let’s see what needs to be done in App Module

Ofcourse, this is a traditional App Module but more importantly just make sure you import FormsModule, ReactiveFormsModule.

App Module Filepath: app.module.ts

//Import BrowserModule
import { BrowserModule } from '@angular/platform-browser';
//Import NgModule
import { NgModule } from '@angular/core';
//Import form modules
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
//Import App Component
import { AppComponent } from './app.component';

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

Secondly, let’s dig into App Component of Angular 4 Reactive Forms

Make sure you import the necessary things.

Initially, create FormGroup which has multiple FormControls inside.

App Component Filepath: app.component.ts

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

selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
export class AppComponent implements OnInit {
title = 'Angular 4 Reactive Forms';
simpleForm: FormGroup;

ngOnInit() {
   this.simpleForm = new FormGroup({
    'name': new FormControl(null, Validators.required),
    'desc': new FormControl(null, Validators.required),
    'age': new FormControl(null, Validators.required),
    'school': new FormControl(null, Validators.required),
   //Save data code

Thirdly, define the Html with FormGroup and FormControls as below

Here, we’ve to bind simpleForm with FormGroup property. Also, need to defined FormControls.

Template Filepath: app.component.html

//Define Angular 4 Reactive Forms
<div class="container">
    //Here title will be dynamic: Angular 4 Reactive Forms
    Welcome to {{title}}!
<form [formGroup]="simpleForm" (ngSubmit)="saveData()">
<div class="row">
  <div class="col-md-4">
    <div class="form-group">
      <label for="name">Name: </label>
      <input type="text" formControlName="name" class="form-control">
    <p class="help-block" *ngIf="!simpleForm.get('name').valid && simpleForm.get('name').touched">Please enter name.</p>
<div class="row">
  <div class="col-md-4">
    <div class="form-group">
      <label for="desc">Desc: </label>
      <input type="text" formControlName="desc" class="form-control">
    <p class="help-block" *ngIf="!simpleForm.get('desc').valid && simpleForm.get('desc').touched">Please enter desc.</p>
<div class="row">
  <div class="col-md-4">
    <div class="form-group">
      <label for="age">Age: </label>
      <input type="text" formControlName="age" class="form-control">
    <p class="help-block" *ngIf="!simpleForm.get('age').valid && simpleForm.get('age').touched">Please enter age.</p>
<div class="row">
  <div class="col-md-4">
    <div class="form-group">
      <label for="school">School: </label>
      <input type="text" formControlName="school" class="form-control">
    <p class="help-block" *ngIf="!simpleForm.get('school').valid && simpleForm.get('school').touched">Please enter school.</p>
<div class="row">
  <div class="col-md-10">
    <div class="form-group">
      <button class="btn btn-primary" type="Submit" [disabled]="!simpleForm.valid">Submit</button>

Finally, apply style as per your need.

app.component.css {
border: 1px solid red;
color: red !important;

Now, put all together and let’s run this Angular 4 Reactive Form.

ng serve

That’s it, open your browser on http://localhost:4200

This article coveres,

  • How to create a reactive form.
  • How to use FormBuilder to code a reactive form.
  • Grouping FormControls.
  • Creating FormControl properties.
  • FormControl Validations
  • Additional suggested visit, Forms In Angular 4 – A 5 Minutes WalkThrough

Moreover, if you’ve any questions/suggestions on Angular 4 Reactive Forms, feel free to hit comments below!

Happy coding!

Leave a Reply

Be the First to Comment!

Notify of