Template Driven Forms in Angular

Introduction

In this article, we will see how to build forms in Angular. Input fields are different such as radio-box, dropdown lists, text-area, input text boxes, etc. In template-driven forms, we will write the logic and validations, controls in the template itself. The logic is driven by template itself. [(ngModel)] is used to bind control using two-way binding.

Building a Form

We can build a form using bootstrap in our Angular project. For making template-driven forms, we need to import the [FormsModule]. To add this go to app.module.ts file, add it in the import array.

import { BrowserModule, DomSanitizer } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    
  ],
  imports: [
    BrowserModule,
    FormsModule,   // Added Here
    ReactiveFormsModule,
    BrowserAnimationsModule,
     ],
  providers: [
   
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor()
    
  
}


Now we will create a new component template-form using Angular CLI by writing the following command on the terminal. In our case, we will write it ng g c template-form.
ng g c <component name> // CLI command syntax to create a component
ng g c template-form

Now we will go to template-form.component.html file and create a form. In our form we will use bootstrap classes form-group, form-control, btn, btn-primary to give modern look and feel to our form. In our form we have one input field for name, one text-area for reviews and a submit button.

<form>
<div class="form-group">
<label for="name">Name</label>
<input id="name" type="text" class="form-control">
</div>
<div class="form-group">
<label for="reviews">Reviews</label>
<textarea id="reviews" class="form-control"></textarea>
</div>
<button class="btn btn-primary">Submit</button>
</form>

Now we will host this component in app.component.html file by writing

<app-template-form></app-template-form>

Now we can add two-way data binding to our form fields using [(ngModel)]. If we simply add ngModel as an attribute to any input field, Angular will create a control object associated with that input field under the hood. Remember when we use ngModel within the <form> tag we need to add the name attribute with it. Otherwise, we will get an error. Let's add ngModel for two-way data binding. We need to set ngModel for the control object and the name attribute to set a template-driven approach. 

<form>
<div class="form-group">
<label for="name">Name</label>
<input id="name" [(ngModel)]="name" #name="ngModel" type="text" class="form-control">
</div>
<div class="form-group">
<label for="reviews">Reviews</label>
<textarea id="reviews"  [(ngModel)]="reviews"  #reviews="ngModel" class="form-control"></textarea>
</div>
<button class="btn btn-primary">Submit</button>
</form>

Template Reference 

We have created a template variable reference for our fields and set them to ngModel like #name="ngModel". It will create an instance of the form control class for this specific field. ngModel is a formControl instance which has various controls associated such as dirty, pristine, valid, invalid, touched, untouched, value, etc. These controls will help us determine the state of the form. This formControl instance is used to track the changes in input fields.

Adding ngForm Directive

We will add ngForm directive to the <form> tag using template reference itself. 
<form #f="ngForm">

We have associated ngForm with template reference named f. When we use <form> with Angular, it will automatically create a ngForm directive for that form. ngForm will provide additional controls to check and track the state of the form. It has all the controls which we created using the ngModel directive. We can check the validity of the form using ngForm directive. It also has properties like FormControl to track the fields at the form level. If all the fields in a form are valid, then only valid property associated with ngForm will be true.

Comments