Template Driven Forms

Create Model
Create Form
Form Directives
ngForm
ngSubmit
Reset Form

Template Driven Forms are like regular html forms with feature of angular. The forms are create in html template. We use Angular Directives for validation, two way data binding and change notification. This is the easiest way to build forms in angular. Its Almost like, build a form in HTML and add Angular features at top.

Prerequisites

Include FormsModule in Angular app to works with Template Driven Form.

Advantages of Template Driven Forms

Simple and quick to start
Best for simple forms

Disadvantages of Template Driven Forms

No dynamic controls
No Advance Features

Model Class

Model Class is a class includes the properties of form. Model Class is a plain class without any method. We will use constructor with public or private properties in class.

Lets create a Login Form with name, password, gender, city and terms & conditions in login.ts file.

login.ts


export class Login{
constructor(public name:string, public password:string, public gender:string, public city:string, public terms:boolean){}
}

import login

Next step is to import Login class in app.component.ts. Also create model object which is an instance of Login class in app.component.ts.


  import { Component } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { FormsModule } from '@angular/forms';
  import { Login } from './login';
  
  @Component({
    selector: 'app-root',
    standalone: true,
    imports: [CommonModule, FormsModule],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
  })
  
  export class AppComponent {
    title = 'ngApp';
    model=new Login("","","","",false);
  }

Form Template

Now let's create a form in template. Its a regular form with form tag, attributes, labels, inputs, select dropdown and a submit button.


<form novalidate action="">

<label>Name: <input type="text" required name="name"></label>

<label>Password: <input type="password" required name="pass"></label>

Gender:
<label> <input type="radio" required name="gender" value="f"> : Female </label>

<label> <input type="radio" required name="gender" value="m"> : Male</label>

<label>City: <select required name="city">
  <option disabled selected value="">--Choose City--</option>
  <option>New Delhi</option>
  <option>Chennai</option>
  <option>Mumbai</option>
  <option>Kolkata</option>
</select></label>

<label><input type="checkbox" required name="terms"> : Terms</label>

<button>Send</button>

</form>

Form Directives

As our form is done, lets add Angular Form Directives to it. AngularJS use ngModel directive in forms. Angular use ngModel directive. Lets learn about ngModel.

ngModel

ngModel can be use as in three ways.

ngModel : name attributes will be used for data binding
[ngModel] : for one way data binding
[(ngModel)] : for two way data binding

bind ngModel to form

Lets bind ngModel to form.


<form novalidate action="">
    
  <label>Name: <input type="text" required name="name" [(ngModel)]="model.name"></label>
    
  <label>Password: <input type="password" required name="pass" [(ngModel)]="model.password"></label>
    
  Gender:
  <label> <input type="radio" required name="gender" value="f" [(ngModel)]="model.gender"> : Female </label>
    
  <label> <input type="radio" required name="gender" value="m" [(ngModel)]="model.gender"> : Male</label>
    
  <label>City: <select required name="city" [(ngModel)]="model.city">
    <option disabled selected value="">--Choose City--</option>
    <option>New Delhi</option>
    <option>Chennai</option>
    <option>Mumbai</option>
    <option>Kolkata</option>
  </select></label>
    
  <label><input type="checkbox" required name="terms" [(ngModel)]="model.terms"> : Terms</label>
    
  <button>Send</button>
    
</form>

ngForm

ngForm directive is used to convert HTML Form to Angular Template Driven Form. ngForm will add Angular Features to the form. To use ngForm, its compulsory to add ngModel and name attribute to form controls. It is also help helpful in form validation.


<form novalidate #loginform="ngForm">
      
  <label>Name: <input type="text" required name="name" [(ngModel)]="model.name"></label>
      
  <label>Password: <input type="password" required name="pass" [(ngModel)]="model.password"></label>
      
  Gender:
  <label> <input type="radio" required name="gender" value="f" [(ngModel)]="model.gender"> : Female </label>
      
  <label> <input type="radio" required name="gender" value="m" [(ngModel)]="model.gender"> : Male</label>
      
  <label>City: <select required name="city" [(ngModel)]="model.city">
    <option disabled selected value="">--Choose City--</option>
    <option>New Delhi</option>
    <option>Chennai</option>
    <option>Mumbai</option>
    <option>Kolkata</option>
  </select></label>
      
  <label><input type="checkbox" required name="terms" [(ngModel)]="model.terms"> : Terms</label>
      
  <button>Send</button>
      
  </form>

ngSubmit

ngSubmit directive is Angular Submit Event to submit form data. We need to bind a function to ngSubmit declared in class Component in example.


import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Login } from './login';
      
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
      
export class AppComponent {
  title = 'ngApp';
  model=new Login("","","","",false);
  onSubmit(data:any){
    console.log(data.value);
  }
}

ngSubmit Example in Form


<form novalidate #loginform="ngForm" (ngSubmit)="onSubmit(loginform)">
        
  <label>Name: <input type="text" required name="name" [(ngModel)]="model.name"></label>
        
  <label>Age: <input type="number" required name="age" [(ngModel)]="model.password"></label>
        
  Gender:
  <label> <input type="radio" required name="gender" value="f" [(ngModel)]="model.gender"> : Female </label>
        
  <label> <input type="radio" required name="gender" value="m" [(ngModel)]="model.gender"> : Male</label>
        
  <label>City: <select required name="city" [(ngModel)]="model.city">
      <option disabled selected value="">--Choose City--</option>
      <option>New Delhi</option>
      <option>Chennai</option>
      <option>Mumbai</option>
      <option>Kolkata</option>
    </select></label>
        
  <label><input type="checkbox" required name="terms" [(ngModel)]="model.terms"> : Terms</label>
        
  <button [disabled]="loginform.invalid">Send</button>
        
</form>

reset form

To reset form in angular, use reset() function on form form variable id.


<form novalidate #loginform="ngForm" (ngSubmit)="onSubmit(loginform)">
        
  <label>Name: <input type="text" required name="name" [(ngModel)]="model.name"></label>
        
  <label>Age: <input type="number" required name="age" [(ngModel)]="model.password"></label>
        
  Gender:
  <label> <input type="radio" required name="gender" value="f" [(ngModel)]="model.gender"> : Female </label>
        
  <label> <input type="radio" required name="gender" value="m" [(ngModel)]="model.gender"> : Male</label>
        
  <label>City: <select required name="city" [(ngModel)]="model.city">
      <option disabled selected value="">--Choose City--</option>
      <option>New Delhi</option>
      <option>Chennai</option>
      <option>Mumbai</option>
      <option>Kolkata</option>
    </select></label>
        
  <label><input type="checkbox" required name="terms" [(ngModel)]="model.terms"> : Terms</label>
        
  <button [disabled]="loginform.invalid">Send</button>

  <button (click)="login.reset()" > Reset </button>
        
</form>