template driven angular 4 forms | Angular | ASP.NET Tutorials

For Consultation : +91 9887575540

Stay Connected :

Angular 4 Template Driven Forms:

  • Angular offers two types of forms: template-driven and model-driven

1.Template Driven :

  • template-driven forms place the emphasis on developing a form within an HTML template and handling most of the logic for the form-inputs, data validation, saving, and updating-in form directives placed within that template.
  • Very less code required because most of the forms related work have been done by the angular framework itself.
  • heavy use of the ngModel form directive
  • FormModule must be imported into app-module.ts
  • FormModule is available for following package

import { FormsModule } from ‘@angular/forms’;


Two Important Directives for form building:

  • • NgForm • ngModel
  • ngForm: It plays a great role in form building, this angular directive concrete values of all HTML elements of form.
  • We can say that by using this directive we are capable to create form object.
  • NgModel: This directive has used no binding, one-way and two-way data binding.
  • It is responsible to hold values of HTML elements.
  • It is also used to validate HTML elements values.



import { Component } from '@angular/core';

  selector: 'app-root',
  template: `
  <h2>Simple Form</h2>
  <form #f="ngForm"  (ngSubmit)="onSubmit(f.value)">
<input type='text' name='fname' ngModel  required />
<input type='text' name='lname' ngModel required />
<input type='submit' [disabled]="f.invalid" value='click here' />
<span> {{ fname }}</span>
<span> {{ lname }}</span>
  styleUrls: ['./app.component.css']
export class AppComponent {
  onSubmit(form: any): void{
    this.fname = form.fname;
    this.lname = form.lname;