Angular Web Framework Reactive Forms & Validation 3 — Questions and Answers
Question 1: Which operator is commonly used to debounce a reactive form's `valueChanges` observable before making an HTTP call?
- debounceTime() (Correct answer)
- delay()
- throttleTime()
- bufferTime()
Correct answer: debounceTime()
`debounceTime()` waits for a specified quiet period after the last emission before forwarding the value, reducing unnecessary API calls.
Question 2: In a cross-field validator, where should you attach the validator to validate that `password` and `confirmPassword` match?
- On the parent FormGroup (Correct answer)
- On the password FormControl
- On the confirmPassword FormControl
- On both controls individually
Correct answer: On the parent FormGroup
Cross-field validators are attached to the FormGroup so they have access to all sibling controls.
Question 3: What is the return type of a valid (passing) custom validator function?
- null (Correct answer)
- { valid: true }
- undefined
- false
Correct answer: null
A validator must return `null` when the control is valid; any non-null object signals an error.
Question 4: Which FormArray method removes the control at a given index?
- removeAt(index) (Correct answer)
- delete(index)
- splice(index)
- remove(index)
Correct answer: removeAt(index)
`FormArray.removeAt(index)` removes the control at the specified position and updates the array's validity.
Question 5: How does Angular determine whether an async validator is still pending?
- The control's status is 'PENDING' (Correct answer)
- The control's status is 'INVALID'
- The isPending property is true
- The asyncStatus$ emits 'loading'
Correct answer: The control's status is 'PENDING'
While async validators are running, the control's `status` property is set to `'PENDING'`.
Question 6: What does calling `FormGroup.reset()` without arguments do to control values?
- Sets all control values to null (Correct answer)
- Reverts to the initial values provided at construction
- Clears only dirty controls
- Throws an error if no default is set
Correct answer: Sets all control values to null
Calling `reset()` with no argument sets every control's value to `null` and resets touched/dirty/pristine state.
Question 7: Which property would you check to know if a reactive form control has been changed by the user but not yet submitted?
- dirty (Correct answer)
- touched
- modified
- changed
Correct answer: dirty
`dirty` is `true` when the user has changed the control's value since it was last reset.
Which operator is commonly used to debounce a reactive form's `valueChanges` observable before making an HTTP call?