Reactive forms model inputs in TypeScript with FormGroup, FormControl, and validators. The template binds with formGroup and formControlName—ideal when validation rules grow beyond a few fields.
Why teams choose reactive forms
- Validation logic lives in one testable class
- Dynamic fields (add/remove controls) are straightforward
- Value changes stream through
valueChangesObservables
Compared to template-driven
Template-driven forms lean on directives in HTML (ngModel, required). Reactive forms invert control: TypeScript is the source of truth; the template reflects it.
Important interview questions and answers
- Q: Reactive vs template-driven—when reactive?
A: Complex validation, dynamic form arrays, or when you want unit tests without rendering templates. - Q: What is
formControlName?
A: Links an input to a named control inside the parentFormGroup.
Self-check
- Where do validators live in a reactive form?
- What prints when you submit with an empty required email?
Challenge
Required email control
- Submit with an empty email—note
form.validin the terminal. - Fill a valid email and submit again.
Done when: terminal shows invalid then valid JSON payloads.
Challenge
Build a reactive control
- Add a required
emailFormControl. - Log
form.validon submit.
Done when: terminal shows valid:false until email is filled.
Interview prep
- Reactive vs template-driven forms?
Reactive forms model controls in TypeScript (scalable validation); template-driven bind controls in the template (fast for simple forms).