Part 8 : Reactive form in angular 2 - Part 8

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

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

The coding required for reactive form in covered in detail with output explained.

Template form code

 import { Component } from '@angular/core';  
 import { FormBuilder, FormGroup } from '@angular/forms';  
 @Component({  
   selector: 'reactive-form',  
   template: `<h1>{{Title}}</h1><hr/>  
   <form [formGroup]='MyForm' (ngSubmit)='SaveData(MyForm.value)'>  
   <label>First Name</label><br/>  
   <input formControlName='FirstName' type='text' /><br/>  
   <label>Last Name</label><br/>  
   <input formControlName='LastName' type='text' /><br/>  
   <button type='Submit' >Save</button>  
   </form>  
   `,  
 })  
 export class ReactiveFormComponent {  
   Title: string;  
   MyForm: FormGroup;  
   constructor(fb: FormBuilder) {  
     this.Title = "Reactive Form";  
     this.MyForm = fb.group({  
       'FirstName': '',  
       'LastName': ''  
     })  
   }  
   SaveData(form: any) {  
     console.log(form);  
   }  
 }  

Download template form complete project : Click here