What are Template-Driven Forms in Angular?

1. What is a Template-Driven Form?

A Template-Driven Form is an Angular form approach where most of the form definition and validation rules are written directly in the HTML template.

It mainly uses:

FormsModule
ngModel
[(ngModel)]
ngForm
HTML validation attributes such as required, minlength, maxlength, etc.

Example:

<input
  type="text"
  name="name"
  [(ngModel)]="name"
  required>

Here Angular automatically creates and manages the underlying form control based on the template.

Simple idea

HTML Template
     ↓
ngModel / ngForm
     ↓
Angular automatically creates form model
     ↓
Component properties

This is why it is called Template-Driven — the HTML template drives the form.

2. Full Simple Sample Program

Let's create a simple registration form with:

Name
Email
Age
Submit button
Validation

`app.ts`

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './app.html'
})
export class App {

  user = {
    name: '',
    email: '',
    age: null
  };

  submitForm() {
    console.log('Form submitted');

    console.log('Name:', this.user.name);
    console.log('Email:', this.user.email);
    console.log('Age:', this.user.age);
  }
}

`app.html`

<h2>User Registration</h2>

<form #userForm="ngForm"
      (ngSubmit)="submitForm()">

  <!-- Name -->

  <div>
    <label>Name:</label>

    <input
      type="text"
      name="name"
      [(ngModel)]="user.name"
      #name="ngModel"
      required
      minlength="3">

    @if (name.invalid && name.touched) {
      <div>
        Name is required and must contain at least 3 characters.
      </div>
    }
  </div>

  <br>

  <!-- Email -->

  <div>
    <label>Email:</label>

    <input
      type="email"
      name="email"
      [(ngModel)]="user.email"
      #email="ngModel"
      required
      email>

    @if (email.invalid && email.touched) {
      <div>
        Please enter a valid email.
      </div>
    }
  </div>

  <br>

  <!-- Age -->

  <div>
    <label>Age:</label>

    <input
      type="number"
      name="age"
      [(ngModel)]="user.age"
      required>
  </div>

  <br>

  <button
    type="submit"
    [disabled]="userForm.invalid">

    Submit

  </button>

</form>

<hr>

<h3>Entered Values</h3>

<p>Name: {{ user.name }}</p>
<p>Email: {{ user.email }}</p>
<p>Age: {{ user.age }}</p>

3. Program Explanation

Step 1: Import `FormsModule`

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

Because we are using a standalone component, import it into the component:

imports: [FormsModule]

FormsModule provides the directives required for template-driven forms, especially:

ngModel
ngForm

4. Create the Model

In the component:

user = {
  name: '',
  email: '',
  age: null
};

This object stores the values entered by the user.

For example:

User enters:

Name  : Syed
Email : syed@example.com
Age   : 48

The component becomes conceptually:

user = {
  name: 'Syed',
  email: 'syed@example.com',
  age: 48
};

5. What is `[(ngModel)]`?

The most important part of a template-driven form is:

[(ngModel)]="user.name"

[(ngModel)] provides two-way data binding.

Component                    HTML

user.name  ───────────────→  textbox

user.name  ←───────────────  textbox

If the user types:

Syed

Angular updates:

user.name = 'Syed';

If the component changes user.name, Angular also updates the textbox.

6. Why is `name` Required?

Notice:

<input
  name="name"
  [(ngModel)]="user.name">

When using ngModel inside a <form>, Angular normally needs the name attribute to register that control with the form.

For example:

name="name"

and:

name="email"

Angular can then maintain the controls as part of the form.

Conceptually:

userForm

 ├── name
 ├── email
 └── age

7. What is `ngForm`?

Look at:

<form #userForm="ngForm">

ngForm represents the entire Angular form.

#userForm is a template reference variable.

We can use it to access information about the form.

For example:

userForm.valid

userForm.invalid

userForm.value

userForm.touched

userForm.dirty

8. Form Validation

We added:

required

and:

minlength="3"

For the name:

<input
  name="name"
  [(ngModel)]="user.name"
  required
  minlength="3">

Angular automatically uses these validation rules.

For example:

""        → Invalid

"Sy"      → Invalid

"Syed"    → Valid

9. What is `#name="ngModel"`?

Consider:

#name="ngModel"

Full example:

<input
  name="name"
  [(ngModel)]="user.name"
  #name="ngModel"
  required>

This gives us access to the Angular form-control state for this input.

We can check:

name.valid
name.invalid
name.touched
name.untouched
name.dirty
name.pristine
name.errors

10. Display Validation Message

We used:

@if (name.invalid && name.touched) {
  <div>
    Name is required and must contain at least 3 characters.
  </div>
}

This means:

Is name invalid?
       AND
Has user touched the field?
       ↓
      Yes
       ↓
Show validation message

This avoids displaying validation errors immediately when the page first loads.

11. Email Validation

We have:

<input
  type="email"
  name="email"
  [(ngModel)]="user.email"
  #email="ngModel"
  required
  email>

There are two validation rules:

required
   ↓
Email cannot be empty

email
   ↓
Value must have a valid email format

12. Disable Submit Button

We used:

<button
  type="submit"
  [disabled]="userForm.invalid">

  Submit

</button>

If the form is invalid:

userForm.invalid = true
        ↓
Submit button disabled

When all fields become valid:

userForm.invalid = false
        ↓
Submit button enabled

13. Form Submission

The form contains:

<form
  #userForm="ngForm"
  (ngSubmit)="submitForm()">

When the user clicks the submit button:

Submit
   ↓
ngSubmit
   ↓
submitForm()

Then:

submitForm() {
  console.log('Form submitted');

  console.log('Name:', this.user.name);
  console.log('Email:', this.user.email);
  console.log('Age:', this.user.age);
}

14. Complete Flow

The overall flow is:

User opens page
      ↓
Angular creates NgForm
      ↓
Angular detects ngModel fields
      ↓
Angular creates form controls
      ↓
User enters data
      ↓
[(ngModel)] updates component properties
      ↓
Angular performs validation
      ↓
Form becomes valid
      ↓
Submit button enabled
      ↓
User clicks Submit
      ↓
ngSubmit
      ↓
submitForm()

15. Template-Driven vs Normal HTML Form

A normal HTML form might contain:

<input type="text" name="name">

Angular Template-Driven Forms add Angular behavior:

<input
  type="text"
  name="name"
  [(ngModel)]="user.name"
  required>

Now Angular can track:

Value
Validation
Touched state
Dirty state
Form validity
Errors

16. Template-Driven Form Structure

A useful way to remember it is:

FormsModule
    │
    ↓
  ngForm
    │
    ├── ngModel → Name
    │
    ├── ngModel → Email
    │
    └── ngModel → Age
          │
          ↓
    Component Properties

17. Key Points

Template-Driven Forms are primarily defined in the HTML template.
They use FormsModule.
[(ngModel)] provides two-way binding.
Angular automatically creates the underlying form model.
ngForm represents the entire form.
ngModel represents/manages individual form controls in the template-driven approach.
name is important for registering ngModel controls with a form.
HTML attributes such as required and minlength can define validation.
Angular tracks states such as:

valid / invalid
touched / untouched
dirty / pristine

Template-driven forms are particularly convenient for small and relatively simple forms.
For complex, dynamic, or highly testable forms, Reactive Forms are often a better fit.

18. Interview Questions and Answers

1. What is a Template-Driven Form?

A Template-Driven Form is an Angular form approach where most of the form structure, binding, and validation are defined in the HTML template using directives such as ngModel.

2. Which module is required?

FormsModule

For a standalone component:

imports: [FormsModule]

3. What is `ngModel`?

ngModel is an Angular directive used to manage a form control and can bind the control's value to a component property.

Example:

<input [(ngModel)]="name" name="name">

4. What is `[(ngModel)]`?

It provides two-way data binding between the HTML form control and component property.

HTML ↔ Component

5. What is `ngForm`?

ngForm represents the entire template-driven form and provides access to its values, validation status, and state.

<form #userForm="ngForm">

6. Why do we use the `name` attribute?

Angular uses the name attribute to register an ngModel control with its parent form.

<input
  name="email"
  [(ngModel)]="email">

7. How do you check whether a form is valid?

userForm.valid

or:

userForm.invalid

8. How do you check whether a field has been touched?

name.touched

A common validation condition is:

@if (name.invalid && name.touched) {
  <span>Please enter a valid name.</span>
}

9. What is the main difference between Template-Driven and Reactive Forms?

Template-Driven
     ↓
Form definition mainly in HTML
     ↓
ngModel


Reactive
     ↓
Form model mainly in TypeScript
     ↓
FormControl / FormGroup

10. When should Template-Driven Forms be used?

They are a good fit for simple forms with straightforward validation, where defining most of the form behavior in the template keeps the implementation concise.

Interview Definition

Template-Driven Forms are an Angular form approach where the form is primarily defined in the HTML template using FormsModule, ngForm, and ngModel. Angular automatically creates and manages the underlying form controls, validation, and form state.

What are Template-Driven Forms in Angular?

What are Template-Driven Forms in Angular?

1. What is a Template-Driven Form?

Simple idea

2. Full Simple Sample Program

app.ts

app.html

3. Program Explanation

Step 1: Import FormsModule

4. Create the Model

5. What is [(ngModel)]?

6. Why is name Required?

7. What is ngForm?

8. Form Validation

9. What is #name="ngModel"?

10. Display Validation Message

11. Email Validation

12. Disable Submit Button

13. Form Submission

14. Complete Flow

15. Template-Driven vs Normal HTML Form

16. Template-Driven Form Structure

17. Key Points

18. Interview Questions and Answers

1. What is a Template-Driven Form?

2. Which module is required?

3. What is ngModel?

4. What is [(ngModel)]?

5. What is ngForm?

6. Why do we use the name attribute?

7. How do you check whether a form is valid?

8. How do you check whether a field has been touched?

9. What is the main difference between Template-Driven and Reactive Forms?

10. When should Template-Driven Forms be used?

Interview Definition

Keep Learning - More From This Category

`app.ts`

`app.html`

Step 1: Import `FormsModule`

5. What is `[(ngModel)]`?

6. Why is `name` Required?

7. What is `ngForm`?

9. What is `#name="ngModel"`?

3. What is `ngModel`?

4. What is `[(ngModel)]`?

5. What is `ngForm`?

6. Why do we use the `name` attribute?