Angular Template-Driven Form Example

In this post we’ll see how to create a template-driven form in Angular.

Interested in creating a Reactive form refer this post- Angular Reactive Form Example

Importing FormsModule

You need to import FormsModule into the AppModule (app.module.ts) for Angular template-driven form to work. When you import the FormsModule in your component, Angular automatically creates and attaches an NgForm directive to the <form> tag in the template. Using NgForm you can track aggregated form value and validation status.

Add FormsModule in the imports section of the AppModule.

imports: [
  BrowserModule,
  FormsModule
],

Data Model

In this template-driven form example we'll create a membership form. Member class defines the data model reflected in the form.

member.model.ts

export class Member {
  name: string;
  mail: string;
  membershipDate: Date;
  membershipType: string;
  constructor(name: string, mail: string, membershipDate: Date, membershipType: string) {
    this.name = name;
    this.mail = mail;
    this.membershipDate  = membershipDate;
    this.membershipType = membershipType;
  }
}

Form Template

In this Angular template driven form example we’ll have a form with two input fields for name and email, a date picker for picking date and a drop down to select one of the option.

app.component.html

<div class="container">
    <div class="row">
      <div class="col-xs-8">
        <h1>Membership Form</h1>
        <form (ngSubmit)="onSubmit()" #membershipForm="ngForm">
          <div class="mb-3">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" 
              id="name"
              ngModel name="name">                        
          </div>
          <div class="mb-3">
            <label for="email" class="form-label">email</label>
            <input type="email" class="form-control" 
              id="email"
              ngModel name="email">                        
          </div>
          <div class="mb-3">
            <label for="mdate" class="form-label">Membership Date</label>
            <input type="date" class="form-control" id="mdate"
              [ngModel]="currentDate | date:'yyyy-MM-dd'"  name="mdate">                        
          </div>
          <div class="mb-3">
            <label for="type" class="form-label">Membership Type</label>
            <select class="form-control form-select" id="type"                    
                ngModel name="type">
              <option *ngFor="let mtype of membershiptypes" [value]="mtype">{{mtype}}</option>
            </select>
          </div>
          <button type="submit" class="btn btn-success mt-3">Submit</button>
        </form> 
      </div>
    </div>
    <hr>
    <div *ngIf="submitted">
      <div class="row">
        <div class="col-xs-8">
          <p>Name: {{member.name}}</p>
          <p>email: {{member.mail}}</p>
          <p>Membership Date: {{member.membershipDate | date:'dd/MM/yyyy'}}</p>
          <p>Membership Type: {{member.membershipType}}</p>
        </div>
      </div>
    </div>  
  </div>

Important points to note here are-

1. class="form-control" is a BootStrap framework classe used for styling. In Angular form a FormControl represents an individual form control where as FormGroup represents a collection of form controls as a group.

2. You would have noticed that ngModel is added with every element. This tells Angular that this element is a form control. Only for Membership date ngModel is used with square brackets meaning as a one way binding to get the current date. For other elements it is added only as ngModel to notify that it is a form control.

3. name="xxxx" specifies the name of form control. Using the specified name this form control is registered in the form.

4. For dropdown options are added using ngFor which iterates over an array called membershiptyes defined in the Component class.

5. Submit button is of type submit so it will trigger a submit event for that event binding is done at the form level.

<form (ngSubmit)="onSubmit()" #membershipForm="ngForm">

6. membershipForm is a local reference that holds a reference to this form.

7. If the form is submitted it shows the entered values.

Component class (app.component.ts)

import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Member } from './member.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
    //definite assignment assertion
    @ViewChild('membershipForm') memberForm!: NgForm;
    membershiptypes = ['Silver', 'Gold', 'Platinum'];
    currentDate = new Date();
    member = new Member('', '', new Date(), '');
    submitted = false;
  
    onSubmit(){
      this.submitted = true;
      this.member.name = this.memberForm.value.name;
      this.member.mail = this.memberForm.value.email;
      this.member.membershipDate = this.memberForm.value.mdate;
      this.member.membershipType = this.memberForm.value.type; 
    }
}

1. @ViewChild decorator is used here to access the local reference. Since local reference membershipForm holds a reference to the JS object for the form so this way you can get access to the form object in your type script code.

2. Here we have currentDate field storing the current date, this is the field bound to the membership date in the template.

3. You create a member object of the Member class where you will assign the field values when the form is submitted (onSubmit() is called).

4. submitted field is intialized as false initially and changed to true when onSubmit() method is called. In the template there is an if condition that shows the entered values when submitted is true.

<div *ngIf="submitted">

That's all for this topic Angular Template-Driven Form Example. If you have any doubt or any suggestions to make please drop a comment. Thanks!

>>>Return to Angular Tutorial Page

Related Topics

You may also like-

Tech Tutorials

Friday, March 8, 2024