ANGULAR Template Driven Forms

Template driven forms are mostly used for creating simpler forms. The essentials for creating Template driven forms:-

  • ngModel is used to create two way data bindings for reading and writing values.
  • Track state changes and validity of form controls.
  • provides visual feedback using css classes
  • Also displays validation errors to users

In template driven forms,validations are done in templates.
Here we need to import FormsModule from @angular/forms.
It is easy to work.
Here ngModel is used in input field
CSS classes for Template Driven Forms:
Indicates this field is not touched by user
Eg:-if email textbox is not clicked then it is untouched
Indicates this field is touched by user.once email textbox is clicked then it becomes touched.
If default value is not modified is called pristine.if email is not modified then pristine
Indicates field is valid if all the validation rules are satisfied

Let us see Step by Step Example of Template Driven forms with validation
Step 1:- Open new Angular project named "TemplateDrivenForms" from Visual studio code editor.
Step 2:- Import Forms Module in app.module.ts file.

Step 3:- Create Customer Component.
Step 4:- Go to command line tool, and issue following command to create a new component inside CustomerForm folder. ng g c CustomerForm
Step 5:- After issuing the above command in command line tool, you will see 4 files.

  • Customerform.component.css
  • Customerform.component.html
  • Customerform.component.spec.ts
  • Customerform.component.ts

Step 6:- You will find the component selector named "app-customerform" in customerform.component.ts file.This selector should be placed as tag in app.component.html.So that during the runtime of the project , it opens the customerform directly.


Now design the customer form using bootstrap css.

  <div class="container">
  <div class="row">
 <div class="form-bg">
 <form #custForm='ngForm' (ngSubmit)="SaveCustomer(custForm)">
 <h1 class="text-center">CUSTOMER DATA FORM<h1>
 <div class="form-group">
 CustomerName:  <input type="text" class="form-control" name="customername" #customername="ngModel" [(ngModel)]="model.customername" autofocus required>
 <div *ngIf="!customername.valid">
     CustomerName is required!
 <div class="form-group">
 Street:  <input type="text" class="form-control" name="street" #street="ngModel" [(ngModel)]="model.street" required>
 <div *ngIf="!street.valid">
   street is required!
 <div class="form-group">
 City:<input type="text" class="form-control" name="city" #city="ngModel" [(ngModel)]="" required>
 <div *ngIf="!city.valid">
   City is required
 <div class="form-group">
  Country:   <input type="text" class="form-control" name="country" #country="ngModel" [(ngModel)]="" required>
 <div *ngIf="!country.valid">
country is required
 <div class="form-group">
 Mobile:     <input type="number" class="form-control" name="mobile" #mobile="ngModel" [(ngModel)]="" required>
 <div *ngIf="!mobile.valid">
Mobile number is required
 <button type="submit" class="btn btn-default" id="savecustomer">Save Customer<button>
 <pre>{ custForm.form.value | json }}<pre>