Angular Template-driven forms

By Sameer
Published in Angular
August 12, 2021
1 min read

Template-driven forms in Angular

Angular Supports two ways of building forms. One is a template-driven approach, the other is called reactive form. Here, we will learn how to create a simple Template-driven forms example app. We first build a simple HTML form with just a few form elements. The ngForm directive will convert it into a Template-driven form and create the top-level FormGroup control. Next, we’ll use the ngModel directive to create FormControl objects for each of the HTML form elements. Later, we will learn about how to submit the form data to the component class and also learn how to initialize or reset form data and how to use the data binding features.

What is Template-driven form?

Template-driven forms require directives and attributes to create predefined behaviors/validations in our template and let it work in the background. All things happen in Templates, so very little code is needed in the component class. This is different from the reactive forms. In those, we define the logic and controls in the component class.

The Template-driven forms

  1. The form is set up with ngForm directive
  2. controls are set up using the ngModel directive
  3. ngModel also provides two-way data binding
  4. The Validations are configured in the template using directives

Template-driven forms are

  1. Contains few lines of code in the component class
  2. Easier to set up

While they are

  1. Avoids dynamically adding controls
  2. Unit testing is difficult

Create the Example Application

Use ng new to create a new application

ng new tdf --routing=true --style=css

Make sure that you have installed everything correctly by running ng serve.

Import FormsModule

To use a template-driven form, the FormsModule must be imported. We usually import this in a root module or shared module. The FormsModule provides all the form directives and constructs for working with forms

Open the app.module.ts and add the import { FormsModule } from '@angular/forms'; to it.

And also add the FormsModule to the imports metadata property array

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';    //import FormsModule


import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';



 declarations: [



 imports: [



  FormsModule          //Add in Imports Array


 providers: [],

 bootstrap: [AppComponent]


export class AppModule { }


Building the template is the first step. The following is a regular HTML form. We enclose it in a <form> tag. We have included two text input (FirstName & LastName), a email (email), a radio button (gender), a checkbox (isMarried), and a select list (country). These are form elements.




  <label for="firstname">First Name</label>

  <input type="text" id="firstname" name="firstname">




  <label for="lastname">Last Name</label>

  <input type="text" id="lastname" name="lastname">




  <label for="email">Email </label>

  <input type="text" id="email" name="email">




  <label for="gender">Geneder</label>

  <input type="radio" value="male" id="gender" name="gender"> Male

  <input type="radio" value="female" id="gender" name="gender"> Female




  <label for="isMarried">Married</label>

  <input type="checkbox" id="isMarried" name="isMarried">




 <label for="country">country </label>

 <select name="country" id="country">

  <option selected="" value=""></option>

  <option [ngValue]="c.id" *ngFor="let c of countryList">







  <button type="submit">Submit</button>





Related Posts

Map, Filter and Tap Operator
August 12, 2021
1 min
© 2021, All Rights Reserved.

Quick Links

Advertise with usAbout UsContact Us

Social Media