Angular Template-Driven Form Example

June 23, 2019

In this post, we will create an example of an Angular Template-Driven form.

We start by executing the following command on a terminal windows.
The command will create the "angular-template-driven-form-example" folder

ng new angular-template-driven-form-example

Lets then proceed to open the folder.

cd angular-template-driven-form-example

Model Class

We proceed now to create a model class for our example data.

ng generate class TestData

Update the test-data.ts file with the following content:


export class TestData {

    public id: number,
    public name: string,
    public comments: string,
    public color: string,
    public season: string,
    public hobbies: boolean[]
  ) {}


Angular Component

Create the TestForm component with the following command

ng generate component TestForm

And update the content of the following two files: test-form/test-form.component.ts, and test-form/test-form.component.html.


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

import { TestData } from '../test-data';

  selector: 'app-test-form',
  templateUrl: './test-form.component.html',
  styleUrls: ['./test-form.component.css']
export class TestFormComponent implements OnInit {

  testData = new TestData(
    1,                    // Id
    'My Name',            // Name
    'My Comments',        // Comments
    'Blue',               // Favorite Color
    'Spring',             // Favorite Season
    [false, true, true, false], // Hobbies

  colors  = ['Red', 'Blue', 'Yellow', 'Purple', 'Orange', 'Green'];
  seasons = ['Spring', 'Summer', 'Autumm', 'Winter'];
  hobbies = ['Reading', 'Writing', 'Painting', 'Walking'];

  constructor() { }

  ngOnInit() {

  onSubmit() {



<h2>Angular Form Example</h2>
<div><em>Template-driven Form</em></div><br/>                    

<form (ngSubmit)="onSubmit()">

    <input type="text" name="name" [(ngModel)]="" size="20" /><br/>
    <textarea name="comments" [(ngModel)]="testData.comments"
      cols="40" rows="4"></textarea><br/>
    <span>Favorite Color</span><br/>
    <select name="color" [(ngModel)]="testData.color">
      <option *ngFor="let c of colors" value="{{c}}">{{c}}</option>

    <span>Favorite Season</span><br/>
    <span *ngFor="let s of seasons">
      <input type="radio" name="season" 
        value="{{s}}" [(ngModel)]="testData.season" /> {{s}}

    <span *ngFor="let h of hobbies; index as i">
      <input type="checkbox" name="hobbies[{{i}}]" 
        value="{{h}}" [(ngModel)]="testData.hobbies[i]" /> {{h}}

  <button type="submit">Submit</button>


Angular Main Module

Update Angular main module file, app.module.ts, to include our TestFormComponent, and the FormsModule functionality.


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';                        

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { TestFormComponent } from './test-form/test-form.component';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Angular Main Component Html

Replace the content of Angular main component html file, app.component.html, with the following text.



Open the App

Now we can open the app with the ng serve command.

ng serve --open

The app will be open on the browser at the http://localhost:4000 location.

Check this app on Github here.

See a live demo here.

See this app on StackBlitz here.