Theory
Two ways to build the same form
FestConnect's registration form needs a name (required), an email (valid format), and an event choice. Angular gives you TWO ways to build it, and choosing between them is a real decision, not a detail.
Template-driven forms put the logic in the HTML, quick and simple. Reactive forms define the form's structure in the TypeScript class, more code but more power and testability. Both support VALIDATION. This lesson covers both approaches, their trade-offs, and validation, so you can pick the right one for FestConnect's needs and for the exam.
At a glance
Template-driven vs reactive forms
| Aspect | Template-driven | Reactive |
|---|---|---|
| Where the logic lives | In the HTML template (ngModel) | In the TypeScript class (FormGroup/FormControl) |
| Module needed | FormsModule | ReactiveFormsModule |
| Complexity | Simple, less code | More setup, more control |
| Best for | Simple, small forms | Complex, dynamic, testable forms |
| Validation | Attributes in the template | Validators in the class |
Theory
The two approaches
Template-driven: you build the form in the HTML using ngModel on each input and let Angular infer the form model from the template. It is quick and reads like plain HTML with directives, great for a simple contact form. The logic lives in the template.
Reactive: you DEFINE the form's structure in the CLASS using FormGroup (the whole form) and FormControl (each field), then bind it to the template. The form model is explicit TypeScript, so it is testable, scalable, and easy to change dynamically. The logic lives in the class.
Rule of thumb: template-driven for simple forms, reactive for complex or dynamic ones. Large real apps usually favour reactive forms for the control they give.
Practical
A reactive form with validation
import { FormGroup, FormControl, Validators } from '@angular/forms';
export class RegisterComponent {
// The form model, defined in the CLASS:
registerForm = new FormGroup({
name: new FormControl('', [Validators.required, Validators.minLength(2)]),
email: new FormControl('', [Validators.required, Validators.email]),
});
submit() {
if (this.registerForm.valid) {
// process this.registerForm.value
}
}
}
// Template binds to it and shows an error:
// <form [formGroup]="registerForm" (ngSubmit)="submit()">
// <input formControlName="name">
// <span *ngIf="registerForm.get('name')?.invalid">Name required</span>
// </form>
Theory
Validation and form state
Both approaches use built-in validators: required, minLength, email, pattern, and more. In reactive forms you list them in the class (Validators.required); in template-driven you use attributes (required, minlength).
Angular tracks each control's STATE, which you use to show messages at the right time:
- valid / invalid: does it pass its validators?
- touched: has the user visited and left the field?
- dirty: has the value changed?
- errors: which validations failed
So you show 'Name is required' only when the field is invalid AND touched (not immediately, which would nag). This state-driven validation is how Angular gives polished form feedback, and it applies in both form styles.
Quiz
What is the key difference between template-driven and reactive forms in Angular?
- Template-driven forms cannot be validated
- Template-driven forms keep the form logic in the HTML template (via ngModel); reactive forms define the form model in the TypeScript class (FormGroup/FormControl)
- Reactive forms do not need any module imported
- They are two names for the same thing
Show the answer
Template-driven forms keep the form logic in the HTML template (via ngModel); reactive forms define the form model in the TypeScript class (FormGroup/FormControl)
The core difference is WHERE the form logic lives: template-driven forms build the model in the HTML TEMPLATE using directives like ngModel (simpler, less code), while reactive forms define the form model explicitly in the TypeScript CLASS using FormGroup and FormControl (more powerful, testable, better for complex forms). Option A is false: both support validation (template-driven via attributes, reactive via Validators). Option C is wrong: reactive forms need ReactiveFormsModule (template-driven need FormsModule). Option D denies the distinction the whole lesson draws. Choose template-driven for simple forms, reactive for complex/dynamic/testable ones.
Think first
Which form style for FestConnect?
FestConnect's registration is simple now (name, email, event) but may grow to add dynamic fields per event type. Which form approach would you choose, and why? Then tap.
Show the answer
Given the plan to grow into DYNAMIC, per-event-type fields, REACTIVE forms are the better choice. Reactive forms define the model in the class, so you can add, remove, or change controls PROGRAMMATICALLY (e.g. add a 'team size' control only for the coding contest), and the explicit model is easy to validate and test. Template-driven forms, being template-based, get awkward for dynamic structures. If the form were guaranteed to stay simple and fixed, template-driven would be fine and quicker. The general guidance: reactive for anything complex, dynamic, or needing strong validation/testing; template-driven for simple, static forms. Since FestConnect anticipates complexity, invest in reactive from the start rather than migrating later. Match the form style to the form's future, not just its present.
Watch out
Form traps
Wrong module: FormsModule for template-driven, ReactiveFormsModule for reactive; the wrong one breaks the form.
Showing errors too early: check touched/dirty as well as invalid, so you do not nag before the user types.
Mixing the two styles on one form: pick one approach per form.
Reactive form without formControlName: bind each input to its control name in the template.
Ignoring form.valid on submit: check validity before processing, do not trust the inputs blindly (server-side validation still matters too).
Theory
Forms done; now connect to the server
FestConnect's Angular front-end can now display, format, and collect data. The last piece is connecting it to the BACK-END, the MongoDB-backed API from Unit 1, to actually load and save events. The final Angular lesson covers services and dependency injection in practice: using HttpClient to call REST APIs and handling the responses with Observables and RxJS. That completes the modern stack: Angular front-end talking to a NoSQL back-end.
Summary
Key takeaways
- Angular has two form approaches: template-driven and reactive.
- Template-driven: form logic in the HTML template via ngModel; simple, less code; needs FormsModule.
- Reactive: form model defined in the TypeScript class with FormGroup/FormControl; powerful, testable; needs ReactiveFormsModule.
- Both support validators (required, minLength, email, pattern), applied in the template or the class.
- Form/control state (valid, invalid, touched, dirty, errors) drives when to show validation messages.
- Choose template-driven for simple forms, reactive for complex or dynamic ones.
- Memory hook: template-driven = logic in HTML, reactive = model in the class.