Angular Architecture & Modules Quiz – 20 Questions with Answers
20 questions · 15 min · Medium
Reactive Forms & Template-Driven Forms in Angular
Test your knowledge of Angular Reactive Forms and Template-Driven Forms, including form creation, validation, form controls, form groups, data binding, submission, and error handling.
- 15
- Questions
- 12 min
- Time limit
- Medium
- Difficulty
No sign-up needed · Last updated:
Score: 0 00:00
Save your score
Create a free account to keep your scores and track your progress. It is optional.
Questions to review
Related quizzes
Guards & Resolvers in Angular
15 questions · 12 min · Medium
Directives (Structural & Attribute) in Angular
15 questions · 12 min · Medium
Components & Data Binding in Angular Quiz – 15 Questions with Answers
15 questions · 12 min · Medium
Angular Routing & Navigation Quiz – 15 Questions with Answers
15 questions · 12 min · Medium
State Management (NgRx) in Angular
15 questions · 12 min · Medium
All 15 questions and answers Spoilers: this shows the questions and answers. Try the quiz first! Open
-
1. What are the two main approaches to handling forms in Angular?
- A. Static Forms and Dynamic Forms
- B. Reactive Forms and Template-Driven Forms
- C. Inline Forms and External Forms
- D. Synchronous Forms and Asynchronous Forms
Show answer
B. Reactive Forms and Template-Driven Forms
Angular provides Reactive Forms and Template-Driven Forms as its two main approaches to building and managing forms.
-
2. Which Angular module is required to use Reactive Forms?
- A. FormsModule
- B. ReactiveModule
- C. ReactiveFormsModule
- D. FormControlModule
Show answer
C. ReactiveFormsModule
ReactiveFormsModule provides directives and utilities for building reactive forms. In standalone Angular applications, it can be imported into a component's imports.
-
3. Which Angular module is required for Template-Driven Forms?
- A. FormsModule
- B. ReactiveFormsModule
- C. TemplateModule
- D. NgModelModule
Show answer
A. FormsModule
FormsModule provides directives such as ngModel and ngForm used in Template-Driven Forms.
-
4. Which class represents an individual form control in Angular Reactive Forms?
- A. FormGroup
- B. FormControl
- C. FormArrayGroup
- D. FormModel
Show answer
B. FormControl
FormControl tracks the value, validation status, and interaction state of an individual form control.
-
5. Which class groups multiple form controls together in Reactive Forms?
- A. FormGroup
- B. FormBuilderGroup
- C. NgGroup
- D. ControlGroupDirective
Show answer
A. FormGroup
FormGroup groups related FormControl instances and manages their combined value and validation status.
-
6. Which directive is commonly used for two-way data binding in Template-Driven Forms?
- A. formControl
- B. formGroup
- C. ngModel
- D. formArray
Show answer
C. ngModel
The ngModel directive supports data binding between a form control and a component property.
-
7. Which directive connects a form element to a FormGroup in Reactive Forms?
- A. ngFormGroup
- B. formGroup
- C. ngModelGroup
- D. formControlGroup
Show answer
B. formGroup
The formGroup directive binds a form element in the template to a FormGroup instance defined in the component.
-
8. Which directive connects an input element to a FormControl by name within a FormGroup?
- A. formControlName
- B. ngControlName
- C. formName
- D. controlGroupName
Show answer
A. formControlName
The formControlName directive associates a template input with a named control in its parent FormGroup.
-
9. Where is the form model primarily defined in Reactive Forms?
- A. Only in the HTML template
- B. In the component class
- C. Only in the CSS file
- D. In the browser URL
Show answer
B. In the component class
Reactive Forms define the form model explicitly in TypeScript, making form structure and validation logic easier to manage programmatically.
-
10. Where is most of the form structure and configuration declared in Template-Driven Forms?
- A. In the HTML template
- B. In a database table
- C. In a routing module
- D. In a CSS stylesheet
Show answer
A. In the HTML template
Template-Driven Forms rely primarily on template directives and HTML attributes to define form controls and validation.
-
11. Which built-in validator checks whether a form control has a value?
- A. Validators.required
- B. Validators.exists
- C. Validators.present
- D. Validators.value
Show answer
A. Validators.required
Validators.required checks that a control contains a non-empty value according to Angular's required-validator rules.
-
12. Which property indicates whether an Angular form control has failed validation?
- A. validOnly
- B. invalid
- C. hasErrorOnly
- D. failed
Show answer
B. invalid
The invalid property is true when the control's validation status is INVALID.
-
13. Which method can be used to programmatically update the value of a FormControl?
- A. setValue()
- B. changeControl()
- C. updateInput()
- D. modifyForm()
Show answer
A. setValue()
The setValue() method updates a FormControl's value programmatically and normally triggers value and validity updates.
-
14. Which method is commonly used to handle form submission in an Angular template?
- A. ngSubmit
- B. ngSend
- C. formSubmitOnly
- D. onFormComplete
Show answer
A. ngSubmit
The ngSubmit event is used to handle form submissions and works with Angular's form directives.
-
15. Which statement best describes a major advantage of Reactive Forms?
- A. They do not support validation
- B. They require all form logic to be written in HTML
- C. They provide explicit, programmatic control over the form model
- D. They cannot be tested
Show answer
C. They provide explicit, programmatic control over the form model
Reactive Forms define controls and validation in TypeScript, supporting predictable updates, complex validation, and straightforward unit testing.