Part 7 : Template form in Angular 2

In this tutorial we will study the implementation of template form in angular 2.

The basic understanding of template form is explained in this video.

The coding required for template form in covered in detail with output explained

Template Form Code

 import { Component } from '@angular/core';  
 @Component({  
   selector: 'template-form',  
   template: `<h1>{{Title}}</h1>  
   <form #form="ngForm" (ngSubmit)='SaveData(form.value)'>  
   <label>First Name</label><br/>  
   <input name='FirstName' ngModel /><br/><br/>  
   <label>Last Name</label><br/>  
   <input name='LastName' ngModel /><br/>  
   <button type='submit'>Save</button>  
   </form>  
   `,  
 })  
 export class TemplateFormComponent {  
   Title: string;  
   constructor() {  
     this.Title = "Template form";  
   }  
   SaveData(form :any){  
     console.log(form);  
   }  
 }  

Click here to download complete project