Angular Template-Driven Forms: Logic in the HTML

Why it exists

To provide a simple, declarative way to build forms in Angular for straightforward use cases. It allows developers to define form behavior, data binding, and validation directly within the HTML template, minimizing component code for simple scenarios.

The mental model

Think of the HTML template as the "boss" of the form. You declare the form's shape, its connection to your data model, and its validation rules directly in the HTML using special Angular attributes (directives). The component class holds the data, but the template drives the interaction and structure.

How it works

First, you must import FormsModule into your Angular module. In your component's template, you use the [(ngModel)] syntax on an input element. This creates a two-way data binding that syncs the input's value with a property in your component. Angular automatically attaches CSS classes like ng-valid, ng-invalid, ng-dirty, and ng-touched to the form controls, allowing you to style them based on their state. The entire form is managed by an ngForm directive that Angular adds automatically to the <form> tag, tracking its overall value and validity. Form submission is handled by binding the (ngSubmit) event on the <form> element to a method in your component.

When to use it

Use it for small, simple forms with a fixed structure. It's an excellent choice for login forms, contact forms, or newsletter sign-ups where the fields and validation rules are static. The setup is quick and keeps the logic co-located with the view.

When not to use it

Avoid template-driven forms for complex, dynamic scenarios. If you need to programmatically add or remove form controls, implement complex cross-field validation, or manage a form whose structure changes based on user input, you should use Reactive Forms. The template-driven approach becomes difficult to manage and test at scale.

One canonical example

A simple user contact form. The component has a contact object with name and email properties. The template has an input like <input type="text" [(ngModel)]="contact.name" name="name" required>. The name attribute is crucial; it registers the control with the form. The required attribute adds a simple validation rule. The form's submit button can be disabled until the form is valid by checking the form's state, like [disabled]="!contactForm.form.valid".