Angular Forms

What Are Angular Forms?

Angular's @angular/forms package gives you structured ways to track a form's values, validity, and user interaction, rather than manually wiring <input> elements and validation logic by hand.

Template-driven forms build the form structure mostly in the HTML template using directives like ngModel. Reactive forms build the form structure explicitly in the TypeScript class using FormGroup and FormControl, and bind the template to that structure.

// Template-driven
<input name="email" ngModel required email />

// Reactive
form = this.fb.group({
  email: ['', [Validators.required, Validators.email]],
});
<input formControlName="email" />

Both approaches validate an email field as required and properly formatted, just structured in different places.

Choosing an Approach

import { FormsModule } from '@angular/forms';          // template-driven
import { ReactiveFormsModule } from '@angular/forms';   // reactive

• Template-driven forms rely on FormsModule and directives like ngModel, ngForm.
• Reactive forms rely on ReactiveFormsModule and explicit classes like FormGroup, FormControl, FormBuilder.
• Both approaches support the same validators and produce the same underlying form model concepts.
• You can mix approaches across different features of the same app, but avoid mixing them within a single form.

Angular Forms Cheatsheet

Comparing the two form approaches at a glance.

When to Use Each Approach

Template-driven forms are quick to write for simple cases, a login form, a small contact form, since most of the setup lives directly in the template. Reactive forms scale better to complex scenarios: dynamic fields, cross-field validation, and forms that need heavy unit testing without rendering a template at all.

• Choose template-driven for small, straightforward forms with minimal validation logic.
• Choose reactive forms for anything with dynamic fields, complex validation, or that needs thorough unit testing.
• The Angular team generally recommends reactive forms for most non-trivial applications.

Validation Concepts Shared by Both

Regardless of approach, Angular forms track the same underlying state for each control: its current value, whether it's valid/invalid, whether it's been touched/dirty, and any active validation errors.

Handling Form Submission

Both approaches use Angular's (ngSubmit) event binding on the <form> element rather than the native (submit) event, since ngSubmit correctly prevents the default full-page form submission automatically.

<form (ngSubmit)="onSubmit()">
  <!-- fields -->
  <button type="submit">Save</button>
</form>

Common Mistakes

• Mixing template-driven directives (ngModel) and reactive form APIs (formControlName) on the same form.
• Using the native (submit) event instead of Angular's (ngSubmit), causing an unwanted full page reload.
• Choosing template-driven forms for a large, dynamic form and fighting the template syntax instead of switching to reactive forms.
• Not importing FormsModule/ReactiveFormsModule in a standalone component that uses form directives.

Key Takeaways

• Angular supports two form approaches: template-driven (FormsModule) and reactive (ReactiveFormsModule).
• Template-driven forms build structure in the template; reactive forms build structure explicitly in TypeScript.
• Both approaches share the same underlying control state: valid, touched, dirty, and errors.
• (ngSubmit) should be used instead of the native (submit) event on Angular forms.