Template-driven Forms
FormsModule, NgModel, two-way binding, form validation, ngForm, template reference variables, validation states
1Which Angular module to import to use template-driven forms?
Which Angular module to import to use template-driven forms?
Answer
FormsModule is required to enable template-driven forms in Angular. It provides directives like NgModel, NgForm and enables two-way data binding with [(ngModel)]. Without this module, form directives won't work and Angular will throw errors.
2Which syntax to use for two-way data binding with NgModel?
Which syntax to use for two-way data binding with NgModel?
Answer
The [(ngModel)] syntax combines property binding [ngModel] and event binding (ngModel) to create two-way data binding. This banana-in-a-box syntax automatically synchronizes the form field value with the component property in both directions, simplifying form state management.
3Which attribute is mandatory on an input with NgModel in a template-driven form?
Which attribute is mandatory on an input with NgModel in a template-driven form?
Answer
The name attribute is mandatory on each input using NgModel in a template-driven form. Angular uses this attribute to register the control in the underlying FormGroup and create the form structure. Without the name attribute, Angular cannot track the control state and will throw an error.
How to access the NgForm directive to check form state?
How to access the state of a specific field in the template?
+13 interview questions
Other Angular interview topics
TypeScript Basics
TypeScript Advanced
Angular Fundamentals
Components & Lifecycle
Services & Dependency Injection
Angular Modules Organization
Angular CLI
Directives & Pipes
Routing & Navigation
Reactive Forms
RxJS Fundamentals
RxJS Operators
HttpClient & API Calls
Basic State Management
Change Detection
Angular Signals
Standalone Components
Angular Unit Testing
End-to-End Testing
Build & Optimization
NgRx Fundamentals
NgRx Advanced
Angular Architecture
Performance Optimization
Security & Best Practices
Advanced RxJS Patterns
Angular Universal & SSR
Angular Micro-frontends
Master Angular for your next interview
Access all questions, flashcards, technical tests, code review exercises and interview simulators.
Start for free