Template-driven forms use directives in the template—chiefly ngModel and ngForm—so Angular creates and tracks controls for you. Import FormsModule in standalone components.
When template-driven shines
- Simple login or settings forms with a handful of fields
- Prototypes where TypeScript form setup feels heavy
- Teams migrating from legacy Angular patterns
Template reference variables
#f="ngForm" exposes the form group in the template so you can disable submit while f.invalid or read f.value on submit.
Important interview questions and answers
- Q: What does
ngModeladd?
A: Two-way binding between the control and a component property, plus control registration with the parent form. - Q: Why import FormsModule?
A: It declaresngModel,ngForm, and related directives for standalone components.
Self-check
- What disables the Save button in the playground example?
- When would you graduate this form to reactive style?
Challenge
City field validation
- Submit with an empty city—button stays disabled.
- Type a city name and submit—terminal shows JSON.
Done when: Save enables only when the required city has a value.
Tip: Template-driven forms suit simple pages; move to reactive forms when validation logic grows.