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';

 

@NgModule({

 declarations: [

  AppComponent

 ],

 imports: [

  BrowserModule,

  AppRoutingModule,

  FormsModule          //Add in Imports Array

 ],

 providers: [],

 bootstrap: [AppComponent]

})

export class AppModule { }

HTML Form

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.

<form>

 

 <p>

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

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

 </p>

 

 <p>

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

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

 </p>

 

 <p>

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

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

 </p>

 

 <p>

  <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

 </p>

 

 <p>

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

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

 </p>

 

 <p>

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

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

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

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

   {{c.name}}

  </option>

 </select>

 </p>

 

 <p>

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

 </p>

 

</form>