Know more about TDF (Template Driven Form) in Angular 2

1. What is Template Driven Form? :

Template Driven Form allow you to manage all Validation's and other error handling in the template of angular 2.

all the code is placed in Template rather than typescript file

2. Add dependency of Template Driven Form into your angular 2 application :

If you want to use TDF then add the "FormsModule" in your app.module.ts.

Import {FormsModule} from "@angular/forms";


@NgModule({
imports : [FormsModule]
})

3. Use TDF in Template using ngForm

ngForm provides following things:

i. Form Field values

ii. Valid/Invalid status

Copy paste following code into your components HTML file

<div>

  <form #userform="ngForm" (ngSubmit)="onFormSubmit(userform.value)">
    <div>
      <input type="text" placeholder="Enter Name" name="name" ngModel>
    </div>
    <div>
     <input type="email" placeholder="Enter ur Email" name="email" ngModel>
    </div>
    <div>
      <input type="text" placeholder="Enter city" name="city" ngModel>
    </div>
  </form>
</div>

4. create onFormSubmit() function in your component typescript file

Import {Component} from "@angular/core";

@Component({
selector :'my-form',
templateUrl :'ur_template_url'
})
export class MyTemplateDrivenComponent{
private userData : any;

onFormSubmit(userFormValue : any){
this.userData = userFormvalue;
console.log(this.userData);
}