Template-Driven Forms

11 min read

Template-Driven Forms

Angular offers two form approaches. Template-driven forms keep validation logic in the HTML template using directives. They are simple to set up and great for basic forms. FormsModule provides ngModel, ngForm, and built-in validators like required, minlength, and email.

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

@Component({
  selector: 'app-register-form',
  standalone: true,
  imports: [FormsModule],
  template: `
    <form #form="ngForm" (ngSubmit)="onSubmit(form)">
      <div>
        <label>Name</label>
        <input name="name" [(ngModel)]="model.name" required minlength="2" />
        @if (form.submitted && form.controls['name']?.invalid) {
          <span class="error">Name must be at least 2 characters.</span>
        }
      </div>
      <div>
        <label>Email</label>
        <input name="email" [(ngModel)]="model.email" required email type="email" />
      </div>
      <button type="submit" [disabled]="form.submitted && form.invalid">
        Register
      </button>
    </form>
  `
})
export class RegisterFormComponent {
  model = { name: '', email: '' };

  onSubmit(form: NgForm) {
    if (form.valid) {
      console.log('Submitted:', this.model);
    }
  }
}

Template-driven forms use two-way binding and template references to access form state. They are best for simple forms. For complex, dynamic forms with programmatic validation, prefer reactive forms.

Ready to test yourself?

Practice Angular— quiz & coding exercises