Post
Ask Question

Data Binding In Template Driven Forms In Angular

Introduction

In this article we are going to learn how to do data binding in template-driven forms. We will also see what are the requirements when we want to work with template driven forms. We already know that template driven forms is the approach in Angular to create forms where most of the code is written in html. Also we know how to enable the template driven forms by adding formsModule in our application.

We are going to start with our previously created sample form using template driven approach.

When we work with data binding in template driven forms Angular provides three directives:

  1. ngForm
  2. ngModel
  3. ngModelGroup

open app.modules.ts and import forms module,

  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import {FormsModule} from '@angular/forms'  
  4. import { AppRoutingModule } from './app-routing.module';  
  5. import { AppComponent } from './app.component';  
  6.   
  7. @NgModule({  
  8.   declarations: [  
  9.     AppComponent  
  10.   ],  
  11.   imports: [  
  12.     BrowserModule,  
  13.     AppRoutingModule,  
  14.     FormsModule  
  15.   ],  
  16.   providers: [],  
  17.   bootstrap: [AppComponent]  
  18. })  
  19. export class AppModule { }  

Now open app.component.html, you can see we have created the basic html form with no Angular directives.

Let us add a bootstrap link in index.html to make use of bootstrap classes in our application.

Just add this link in index.html

  1. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">  
Open app.component.ts and add the below contents
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-root',  
  5.   templateUrl: './app.component.html',  
  6.   styleUrls: ['./app.component.css']  
  7. })  
  8. export class AppComponent implements OnInit{  
  9.   groups=['A+', 'A-', 'B+', 'B-', 'O+', 'O-'];  
  10.   
  11.   SubmitDetails(studentData){  
  12.     console.log(studentData);  
  13.   }  
  14.   constructor() { }    
  15.   ngOnInit() {    
  16.   }  
  17. }  

Now add the below contents in app.component.html

  1. <div class="container-fluid">  
  2. <h3>  
  3.   Student Registration!  
  4. </h3>  
  5. <p>Enter the below fields for student details.</p>  
  6.   <form #studentForm="ngForm">  
  7.     <div class="row">  
  8.       <div class="col-sm-4">  
  9.           <div class="form-group">  
  10.               <label for="name">Name:</label>  
  11.               <input type="text" class="form-control" ngModel name="name">  
  12.             </div>  
  13.       </div>  
  14.       <div class="col-sm-4">  
  15.           <div class="form-group">  
  16.               <label for="email">Email address:</label>  
  17.               <input type="text" class="form-control" ngModel name="email">  
  18.             </div>  
  19.       </div>  
  20.       <div class="col-sm-4">  
  21.           <div class="form-group">  
  22.               <label for="phone">Phone:</label>  
  23.               <input type="text" class="form-control" ngModel name="phone">  
  24.             </div>  
  25.       </div>  
  26.     </div>  
  27.     <div class="row">  
  28.         <div class="col-sm-4">  
  29.             <div class="form-group">  
  30.                 <label for="gender">gender:</label>  
  31.                 <input type="text" class="form-control" ngModel name="gender">  
  32.               </div>  
  33.         </div>  
  34.         <div class="col-sm-4">  
  35.             <div class="form-group">  
  36.                 <label for="bloodGroup">Blood Group:</label>  
  37.                 <select class="form-control" ngModel name="bloodGroup">  
  38.                   <option selected>A+</option>  
  39.                   <option *ngFor="let group of groups">{{group}}</option>  
  40.                 </select>  
  41.               </div>  
  42.         </div>  
  43.         <div class="col-sm-4">  
  44.             <div class="form-group">  
  45.               <label>Course </label><br>  
  46.               <input type="radio" ngModel name="course" value="BCA">BCA     
  47.               <input type="radio" ngModel name="course" value="B.Tech">B.Tech     
  48.               <input type="radio" ngModel name="course" value="BE">BE     
  49.               <input type="radio" ngModel name="course" value="B.Sc">B.Sc     
  50.             </div>  
  51.         </div>          
  52.     </div>  
  53.     <div class="row" ngModelGroup="address">  
  54.         <div class="col-sm-4">  
  55.             <div class="form-group">  
  56.                 <label>Street</label>  
  57.                 <input type="text" class="form-control" name="street" ngModel>  
  58.               </div>  
  59.         </div>  
  60.         <div class="col-sm-4">  
  61.             <div class="form-group">  
  62.                 <label>City</label>  
  63.                 <input type="text" class="form-control" name="city" ngModel>  
  64.               </div>  
  65.         </div>  
  66.         <div class="col-sm-4">  
  67.             <div class="form-group">  
  68.                 <label>State</label>  
  69.                 <input type="text" class="form-control" name="state" ngModel>  
  70.               </div>  
  71.         </div>  
  72.     </div>  
  73.     <div class="checkbox">  
  74.       <label><input type="checkbox" ngModel name="sendUpdates"> send me updates</label>  
  75.     </div>  
  76.     <button type="submit" class="btn btn-primary">Submit</button>  
  77.   </form>  
  78. </div>  

Just copy and paste the contents: 

Run the application.
 
 Data Binding In Template Driven Forms In Angular
You will have the above screen when you run the application. 
 
Significance of form tag in angular
 
Anytime we add the form tag in html view Angular attaches the ngForm directive to that form tag which gives us valuable information about that particular form. It tells the values of form control, and if it is valid or invalid.We can achieve this functionality by the use of template reference value. We have added the template reference value #studentForm=”ngForm”. When we assign the value “ngForm” to template reference variable, we are assigning the reference of ngForm directive to that variable. 
 
ngModel Directive
 
ngModel allow the controls to be tracked. So we have to place ngModel directive in each control including textbox, select, radio and check. So when we put the ngModel directive in the control then we have to use ‘name’ attributes set in the controls or the form control must be defined as ‘standalone’ in ngModelOptions.So along with the ngModel directive, ‘name’ attributes must be set and we will be able to retrieve the values of form controls using ngForm and ngModel directives. 
 
ngModelGroup directive
 
When we have the requirement to group the controls in the form, say address has the sub fields – street, city, state, pin. The group of controls together forms information. So in our form all the elements are grouped by address object using ngModelGroup directive. 
 
Now go to your screen, fill in the details and submit the details,
 
Data Binding In Template Driven Forms In Angular 
 
You can see what we have done on submitting of form data. We have just logged the values and we can see the value that is corresponding to that studentForm.
 
Address - group of controls ( street, city, state ) with the help of ngModelGroup directive.
 
Remaining controls are just using ngModel directive with name attribute set on it.
 
You can add interpolation statement for viewing the form value that is being bound.

 

  1. {{studentForm.value | json}}  

 

Add this statement anywhere in your html and you can see the bound value will be displayed. 


Similar Articles