In Template Driven Forms we specify behaviors/validations using directives and attributes in our template and let it work behind the scenes. All things happen in Templates hence very little code is required in the component class. This is different from the reactive forms, where we define the logic and controls in the component class.

1. The form is set up using ngForm directive.
2. Controls are set up using the ngModel directive.
3. ngModel provides the two-way data binding.
4. The Validations are configured in the template via directives.

Steps To Build Template-Deiven Form

Step 1: Create a root directory called Form using the following command:

mkdir Form

Step 2: Navigate to the root directory. Run the following command to initialize a new Angular app:

npm install -g @angular/cli
cd From
ng new my-angular-form-project

Dependencies

"dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  }

Folder Structure

Folder Structure

Example: In this example we are creating a basic Template-Driven Form

<!-- src/app/app.component.html -->

<form #contactForm="ngForm" (ngSubmit)="onSubmit(contactForm)">
    <p>
        <label for="firstname">First Name</label>
        <input type="text" name="firstname" ngModel #fname="ngModel">
    </p>

    <p>
        <label for="lastname">Last Name</label>
        <input type="text" name="lastname" ngModel>
    </p>

    <p>
        <label for="email">Email </label>
        <input type="text" id="email" name="email" ngModel>
    </p>

    <p>
        <label for="gender">Gender</label>
        <input type="radio" value="male" name="gender" ngModel> Male
        <input type="radio" value="female" name="gender" ngModel> Female
    </p>

    <p>
        <label for="isMarried">Married</label>
        <input type="checkbox" name="isMarried" ngModel>
    </p>

    <p>
        <label for="country">Country</label>
        <select name="country" ngModel>
            <option [ngValue]="c.id" *ngFor="let c of countryList">
                {{c.name}}
            </option>
        </select>
    </p>

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

</form>

/* src/app/app.component.css */

body {
    background: #f3f3f3;
    text-align: center;
}

.App {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    padding: 10px 20px;
    transition: transform 0.2s;
    width: 500px;
    text-align: center;
    margin: auto;
    margin-top: 20px;
}

h1 {
    font-size: x-large;
    text-align: center;
    color: #327c35;
}

fieldset {
    border: none;
}

input {
    display: block;
    width: 100%;
    /* margin-bottom: 15px; */
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 12px;
}

input[type="radio"],
input[type="checkbox"] {
    display: inline;
    width: 10%;
}

select {
    display: block;
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 5px;
}

label {
    font-size: 15px;
    display: block;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 5px;
    text-align: left;
    color: #555;
    font-weight: bold;
}

button {
    padding: 15px;
    border-radius: 10px;
    margin: 15px;
    border: none;
    color: white;
    cursor: pointer;
    background-color: #4caf50;
    width: 40%;
    font-size: 16px;
}

textarea {
    resize: none;
    width: 98%;
    min-height: 100px;
    max-height: 150px;
}

// src/app/app.component.ts

import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgForm } from '@angular/forms';

@Component({
    selector: 'app-root',
    imports: [CommonModule, FormsModule],
    standalone: true,
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = "my-angular-form-project";

    countryList: country[] = [
        new country('1', 'India'),
        new country('2', 'USA'),
        new country('3', 'England'),
    ];

    onSubmit(contactForm: NgForm) {
        // Your form submission logic here
        console.log('Form Submitted!', contactForm.value);
    }
}

export class country {
    id: string;
    name: string;

    constructor(id: string, name: string) {
        this.id = id;
        this.name = name;
    }
}

To run the application, type the following command:

ng serve

Output

Building Template-Driven Form in Angular

Benefits of Template-Driven Forms

• Simplicity: Template-driven forms are simple to set up and use, making them ideal for smaller or less complex forms. They allow you to define your form in the template, which can be more intuitive for developers familiar with HTML.
• Two-Way Data Binding: With Angular’s two-way data binding, template-driven forms can automatically update the model as the user interacts with the form. This feature reduces boilerplate code and makes it easier to manage form data.
• Built-In Validation: Angular’s built-in validators can be easily applied to form controls using attributes like required, minlength, maxlength, and more. Custom validators can also be added if needed.
• Integration with Angular Directives: Template-driven forms uses Angular’s powerful directives, such as ngModel, ngSubmit, and ngForm, to create and manage forms efficiently.