Simplicity in Capture: Template-Driven Forms

Master the art of creating simple, powerful forms in Angular directly within your HTML templates.

Simulation ProgressStep 1 of 7
📄
⭐ 0 EXP

Welcome! Angular Template-Driven forms rely on directives in the HTML to handle data. Let's build one.


<form>
</form>

The Foundation: FormsModule

Before you write a single line of form HTML, you must enable the capabilities in Angular. Template-driven forms are not available by default; they live in the @angular/forms package.

You need to import FormsModule and add it to the imports array of your AppModule (or the relevant feature module). This makes directives like `ngModel` and `ngForm` available to your templates.

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

@NgModule({
  imports: [
    FormsModule,
    // ...
  ]
})

Logic Gate Check

Which module is required to use Template-Driven forms?

Advanced Engineering Labs

⭐ 0 EXP

Prove your mastery of the template syntax.

Achievements

🏗️
Form Architect

Successfully structure a Template-Driven form with ngForm.

🔗
Binding Boss

Master the use of [(ngModel)] for two-way data binding.

🛡️
Validation Virtuoso

Implement validation logic using visual state feedback.

Mission: Build a Registration Form

Create a form with one input bound via `ngModel`. Ensure you assign a `name`, export the `ngForm` to a variable, and handle `(ngSubmit)`.

Compiler Output:

> Awaiting input...

Challenge: The Lifecycle of a Form

Arrange these steps in the logical order they must occur to create a working form.

Add <input> with ngModel
Import FormsModule in Module
Handle (ngSubmit)
Use form.valid for UI feedback

Challenge: Complete the Template

Fill in the missing directives to make this form functional.

<form #f="" ()="save()">
<input name="user" >
</form>

Consult the Architect

Developer Network

Code Review

Submit your "Registration Form" snippet for peer review on our Slack channel.

Support Us

Simplicity in Capture: Mastering Template-Driven Forms

Angular offers two distinct approaches to handling user input: Reactive Forms and **Template-Driven Forms**. While Reactive forms are often lauded for their scalability and testability, Template-Driven forms remain the go-to solution for simple to moderately complex forms due to their simplicity and declarative nature. You define the logic right where you define the layout: in the HTML.

The Core Trinity: Module, Directive, Reference

To make template-driven forms work, you must understand the three pillars that hold the structure together:

  • FormsModule: Without importing this in your `AppModule` (or feature module), none of the directives will work. It is the key that unlocks the engine.
  • ngModel: This is the bridge. Placed on an input, it tells Angular, "Watch this field." It handles the data synchronization between your view (HTML) and your model (Class).
  • ngForm: Angular automatically attaches this directive to any <form> tag when `FormsModule` is active. It silently tracks the aggregate state of every control inside it.

The Magic of Template Reference Variables

Perhaps the most powerful feature is the ability to extract the entire form state into a local variable using the syntax #myForm="ngForm". This variable exposes properties like:

State Properties

  • valid: True if all controls pass validation.
  • dirty: True if the user has modified a value.
  • touched: True if the user has blurred a field.

Usage Example

<button [disabled]="!myForm.valid">
  Submit
</button>

Disabling the button until the form is valid.

Two-Way Binding Syntax

The famous "Banana in a Box" syntax [(ngModel)]="user.name" is syntactic sugar. It combines a property binding `[ngModel]` (writing data to the view) and an event binding `(ngModelChange)` (reading data from the view). This allows for real-time synchronization between your TypeScript code and the user's input.

Pro Tip: Always provide a `name` attribute when using `ngModel` inside a <form>. Angular uses the `name` attribute to register the control with the parent `ngForm` directive. Without it, you'll get a console error.

Angular Forms Glossary

Template-Driven Forms
A way of building forms in Angular where the logic is handled primarily in the HTML template using directives.
FormsModule
The Angular module (`@angular/forms`) that must be imported to use template-driven directives like `ngModel` and `ngForm`.
ngModel
A directive that creates a binding between a form control and a property in the component class.
[(ngModel)]
Syntax for two-way data binding. It keeps the input value and the class property in sync automatically.
ngForm
A directive that Angular attaches to the <form> tag. It creates a top-level `FormGroup` instance and tracks the validity of all child controls.
(ngSubmit)
An event triggered when the user attempts to submit the form (e.g., pressing Enter or clicking a submit button). It prevents the default HTTP postback.
Template Reference Variable (#var)
A way to reference a DOM element or directive within the template. Example: `#f="ngForm"` allows you to use `f.value` or `f.valid`.
pristine / dirty
Control states. `Pristine` means the value has not been changed by the user. `Dirty` means it has.
touched / untouched
Control states. `Touched` means the user has focused and then blurred (left) the field.

About the Author

Author's Avatar

TodoTutorial Angular Team

Enterprise developers specializing in scalable frontend architectures.

This article was crafted by Angular GDEs and reviewed against Angular 17+ best practices.

Verification

Last reviewed: October 2025.

Verified for compatibility with Angular 16, 17, and 18.

Resources