Angular Forms Overview
Angular provides two approaches to handle forms:
-
Template-Driven Forms
-
Reactive Forms (Model-Driven Forms)
Both achieve the same goal but differ in implementation, control, and scalability.
Template-Driven Forms
Definition (interview-ready):
Forms where most of the logic is handled in the HTML template, using Angular directives.
Key Characteristics
-
Uses
ngModel -
Requires
FormsModule -
Two-way data binding
-
Minimal TypeScript code
-
Best for simple forms
Example
<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
<input name="username" [(ngModel)]="user.username" required>
<button type="submit">Submit</button>
</form>
onSubmit(form: any) {
console.log(form.value);
}
Validation
<input name="email" ngModel required email #email="ngModel">
<div *ngIf="email.invalid && email.touched">
Invalid Email
</div>
Pros
✔ Easy to learn
✔ Less code
✔ Good for small/simple forms
Cons
❌ Hard to scale
❌ Limited control
❌ Difficult for complex validations
Reactive Forms
Definition (interview-ready):
Forms where logic is defined in the component (TypeScript) using a form model (FormGroup, FormControl).
Key Characteristics
-
Uses
FormGroup,FormControl -
Requires
ReactiveFormsModule -
No two-way binding
-
Highly scalable and testable
-
Best for complex forms
Example
import { FormGroup, FormControl, Validators } from '@angular/forms';
form = new FormGroup({
username: new FormControl('', Validators.required)
});
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<input formControlName="username">
<button type="submit">Submit</button>
</form>
Validation
username: new FormControl('', [
Validators.required,
Validators.minLength(3)
])
<div *ngIf="form.get('username')?.invalid && form.get('username')?.touched">
Invalid Username
</div>
Pros
✔ Better control
✔ Scalable for large forms
✔ Easier unit testing
✔ Dynamic form creation possible
Cons
❌ More boilerplate code
❌ Slightly steeper learning curve
Key Differences (VERY IMPORTANT)
| Feature | Template-Driven Forms | Reactive Forms |
|---|---|---|
| Approach | Template-based | Code-based (TS) |
| Data Binding | Two-way (ngModel) |
One-way |
| Setup | Simple | More setup required |
| Validation | Template | Component (TS) |
| Scalability | Low | High |
| Testability | Difficult | Easy |
| Dynamic Forms | Hard | Easy |
| Control | Less | Full control |
When to Use What
Use Template-Driven Forms when:
-
Form is simple
-
Few fields
-
Basic validation
Use Reactive Forms when:
-
Form is complex
-
Dynamic fields required
-
Advanced validation needed
-
Need better performance & control
Important Interview Questions
1. Why Reactive Forms are preferred in enterprise apps?
✔ Better scalability
✔ Easier testing
✔ More control over validation
✔ Supports dynamic forms
2. Can we use both approaches together?
✔ Technically yes
❌ Not recommended (can create confusion)
3. Which one performs better?
✔ Reactive Forms
(because logic is in TS, not template)
4. What is FormGroup?
A collection of FormControls
5. What is FormControl?
Represents a single input field
6. What is FormArray?
Used for dynamic form fields
Example:
new FormArray([
new FormControl(''),
new FormControl('')
])
Final One-Line Summary
-
Template-Driven → simple, template-based, less control
-
Reactive → powerful, scalable, code-driven