Angular 8 Forms

Forms in Angular 8 are used to handle the user’s input, enable users to log in, update profile, enter information, and to perform different data-entry tasks. To handle the user’s input through forms, there are 2 approaches in Angular 8:

  • Reactive forms
  • Template-driven forms

Reactive Forms vs. Template-driven Forms:

For the collection of the user’s input events from the view, validation of the user’s input, creation of a form model and data model to update, and to facilitate a way to track changes, the Reactive forms, and Template-driven forms are used. However, each of these approaches manages and processes the data differently, offering different advantages.

Reactive Forms:

  • More robust.
  • More scalable, reusable, and testable.
  • Best to use if forms are a key part of your application, or the application is already built using reactive patterns.

Template-driven Forms:

  • Best to use to add a simple form to an application, such as email list signup form.
  • Easy to use in the application.
  • Not as scalable as Reactive forms.
  • Most preferred to use if an application requires a very basic form and logic.
  • Easily managed in a template.

Example: Angular reactive form:

  • Create an Angular form app and name it as ang8form.
  • Run the server. Use the below commands.
  1. ng new ang8form
  2. cd ang8form
  3. ng serve

  • Install Bootstrap 4.

          Command: npm install bootstrap –save

  • The bootstrap 4 is now required to be included inside the angular.json file inside the styles array.
"styles": [  

  • Register the Reactive Forms Module

Import the ReactiveFormsModule from the @angular/forms package. To use the reactive forms, the imported module is added to the app.module.ts file’s import array.


import { BrowserModule } from '@angular/platform-browser';  
import { NgModule } from '@angular/core';  
import { AppRoutingModule } from './app-routing.module';  
import { AppComponent } from './app.component';  
import { ReactiveFormsModule } from '@angular/forms';  
  declarations: [  
  imports: [  
  providers: [],  
  bootstrap: [AppComponent],  
export class AppModule { }  

  • Add FormControl class.
  • Register the control into the template.
  • Update the FormControl value.

The FormControl class which is the basic building block used in reactive forms is imported into the component to register a single form-control. A new instance of the form control is created to save as a class property.

  • Modify the app.component.ts file.


import { Component } from '@angular/core';  
import { FormControl } from '@angular/forms';  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
export class AppComponent {  
  email = new FormControl('');  
  updateEmail() {'[email protected]');  

  • Modify the app.component.html file.


Value: {{ email.value }}

  • Save the code.
  • Start the server.

Output 1:

  • Enter any email id.
  • Check the result.

Output 2:

  • Click on the “Update Email” button to update the email id as we saved in the template file.

Output 3: