Two Form APIs — Pick One

Angular ships two distinct form systems. Knowing which to reach for saves you from rewriting the whole form when requirements grow.

4 min read Level 2/5 #angular#forms

What you'll learn

Compare template-driven and reactive forms
Import FormsModule or ReactiveFormsModule
Decide which fits your case

Forms in Angular come in two flavours that look similar on the surface but have very different mental models.

Template-Driven Forms

You declare inputs in the template with [(ngModel)]. Angular builds the form-control tree implicitly. Great for log-in forms, contact forms, anything with a handful of fields.

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

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [FormsModule],
  template: `
    <form #f="ngForm" (ngSubmit)="save(f.value)">
      <input name="email" ngModel required />
      <button>Save</button>
    </form>
  `,
})
export class LoginComponent {
  save(v: any) { console.log(v); }
}

Reactive Forms

You build the form model in TypeScript as FormGroup / FormControl. The template just binds to it. Better for validation, dynamic fields, and tests.

import { Component, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="save()">
      <input formControlName="email" />
      <button [disabled]="form.invalid">Save</button>
    </form>
  `,
})
export class LoginComponent {
  form = inject(FormBuilder).group({
    email: ['', [Validators.required, Validators.email]],
  });
  save() { console.log(this.form.value); }
}

Which One?

Reach for reactive forms when you have any of:

More than one validation rule per field
Dynamic fields added at runtime
Multi-step flows or wizards
Unit tests on form behaviour

Template-driven is fine for static, mostly-validation-free forms.

Template-Driven Forms →