MEAN Angular Routing and Forms 5 — Questions and Answers
Question 1: Which Angular form validator would you use to ensure an input matches a specific regular expression pattern?
- Validators.required
- Validators.pattern() (Correct answer)
- Validators.format()
- Validators.regex()
Correct answer: Validators.pattern()
Validators.pattern() accepts a string or RegExp and validates that the control's value matches the given pattern.
Question 2: What is the role of a Route Resolver in Angular?
- It resolves circular dependencies between route modules
- It pre-fetches data before the target component is activated (Correct answer)
- It resolves route guard conflicts when multiple guards are present
- It converts route parameters from strings to their required types
Correct answer: It pre-fetches data before the target component is activated
A Resolver fetches data from a service before the route activates, so the component receives the data immediately without needing a loading state.
Question 3: In Angular template-driven forms, what attribute is required on a form control for Angular to track it as part of the form model?
- formControl
- ngModel (Correct answer)
- formControlName
- [(model)]
Correct answer: ngModel
The ngModel directive registers the element with the parent NgForm, making it part of the template-driven form model and enabling two-way data binding.
Question 4: What does Angular's `preloadingStrategy: PreloadAllModules` do when configured in RouterModule?
- Loads all lazy modules immediately on app startup
- Eagerly loads all feature modules into the initial bundle
- Loads lazy modules in the background after the initial navigation completes (Correct answer)
- Delays lazy module loading until the user hovers over a link
Correct answer: Loads lazy modules in the background after the initial navigation completes
PreloadAllModules causes Angular to start downloading all lazy-loaded modules in the background after the initial route loads, improving subsequent navigation speed.
Question 5: How do you access the value of a nested FormGroup control named 'city' inside a 'address' FormGroup in Angular reactive forms?
- form.get('address.city') (Correct answer)
- form.controls.address.city.value
- form.nested('address', 'city')
- form.find('address').find('city')
Correct answer: form.get('address.city')
The get() method on AbstractControl accepts a dot-notation path string to access deeply nested controls within a FormGroup.
Question 6: Which Angular routing feature allows you to display multiple independent router outlets in the same component?
- Nested routes
- Named router outlets
- Auxiliary routes with named outlets (Correct answer)
- Secondary route trees
Correct answer: Auxiliary routes with named outlets
Auxiliary routes with named outlets allow multiple router-outlet elements with distinct names to render independent route trees simultaneously in the same template.
Question 7: What is the correct way to create a cross-field validator that checks if 'password' and 'confirmPassword' fields match in a reactive FormGroup?
- Add Validators.match() to each individual control
- Pass a validator function as the second argument to FormGroup constructor (Correct answer)
- Use a custom AsyncValidator on the FormGroup
- Add a Validators.crossField() at the module level
Correct answer: Pass a validator function as the second argument to FormGroup constructor
Cross-field validators are passed as the second argument (options object with validators property) to the FormGroup constructor, giving access to the whole group's value.
MEAN Angular Routing and Forms 5
Which Angular form validator would you use to ensure an input matches a specific regular expression pattern?