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

//Here title will be dynamic: Angular 4 Reactive Forms
Welcome to {{title}}!

Please enter name.

Please enter desc.

Please enter age.

Please enter school.


Finally, apply style as per your need.


input.ng-invalid.ng-touched {
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!

0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments

classy ebony stepdaughter screwed sensually.kirmiziyilan.com

Would love your thoughts, please comment.x