Angular Web Framework Reactive Forms & Validation — Questions and Answers
Question 1: What is the difference between template-driven and reactive forms in Angular?
- Template-driven uses directives in HTML; reactive uses explicit form model in TypeScript (Correct answer)
- They are identical approaches
- Template-driven is for mobile; reactive is for desktop
- Reactive forms cannot handle validation
Correct answer: Template-driven uses directives in HTML; reactive uses explicit form model in TypeScript
Template-driven forms use ngModel directives in the template for two-way binding, while reactive forms create an explicit form model in the component class, offering more control and testability.
Question 2: What is a FormGroup in reactive forms?
- A collection of FormControls that tracks their combined value and validation status (Correct answer)
- A group of HTML form elements with no functional relationship
- A team of developers working on form features
- A database table for storing form submissions
Correct answer: A collection of FormControls that tracks their combined value and validation status
FormGroup aggregates multiple FormControls into a single object, tracking the collective value and validation status, making it easy to manage forms with multiple fields.
Question 3: How do you create a custom validator in Angular?
- By writing a function that returns null for valid or an error object for invalid input (Correct answer)
- By modifying the Angular source code directly
- Custom validators are not possible in Angular
- By installing a third-party validation library
Correct answer: By writing a function that returns null for valid or an error object for invalid input
Custom validators are functions that receive a FormControl and return null (valid) or an object describing the validation error (invalid), enabling application-specific validation logic.
Question 4: What is the purpose of the Validators class?
- Provides built-in validation functions like required, minLength, maxLength, and pattern (Correct answer)
- Validates Angular application architecture
- Validates CSS stylesheets for errors
- Validates server-side API responses
Correct answer: Provides built-in validation functions like required, minLength, maxLength, and pattern
The Validators class provides commonly needed validation functions that can be applied to form controls, including required, min, max, minLength, maxLength, email, and pattern.
Question 5: What is async validation in Angular forms?
- Validation that performs asynchronous operations like server-side checks before determining validity (Correct answer)
- Validation that runs faster than synchronous validation
- Validation that only works with asynchronous JavaScript functions
- Validation that delays form submission indefinitely
Correct answer: Validation that performs asynchronous operations like server-side checks before determining validity
Async validators perform operations like checking if a username already exists on the server, returning an Observable or Promise that resolves to null (valid) or an error object (invalid).
Question 6: What is the valueChanges Observable in reactive forms?
- An Observable that emits the current value whenever any form control value changes (Correct answer)
- A notification when form CSS values change
- An alert when database values are modified
- A log of all historical form values
Correct answer: An Observable that emits the current value whenever any form control value changes
valueChanges is an Observable available on FormControl, FormGroup, and FormArray that emits the latest value whenever the form value changes, enabling reactive programming patterns.
Angular Web Framework Reactive Forms & Validation
What is the difference between template-driven and reactive forms in Angular?