Angular Web Framework Reactive Forms & Validation 4 — Questions and Answers
Question 1: Which `FormBuilder` shorthand creates a control with an initial value and a single validator?
- fb.control('value', Validators.required) (Correct answer)
- fb.field('value', Validators.required)
- fb.input('value', Validators.required)
- fb.make('value', [Validators.required])
Correct answer: fb.control('value', Validators.required)
`FormBuilder.control(initialValue, validators)` is the shorthand for creating a single reactive FormControl.
Question 2: When composing multiple validators with `Validators.compose()`, what happens if one validator returns errors?
- All validator errors are merged into a single error object (Correct answer)
- Only the first error is kept
- The remaining validators are skipped
- The control is immediately marked invalid and no other validator runs
Correct answer: All validator errors are merged into a single error object
`Validators.compose()` runs all validators and merges their error objects, so multiple errors can coexist.
Question 3: What is the difference between `setValue()` and `patchValue()` on a FormGroup?
- setValue() requires all controls to be provided; patchValue() allows partial updates (Correct answer)
- patchValue() throws if a key is missing; setValue() does not
- setValue() is async; patchValue() is synchronous
- They are identical in behavior
Correct answer: setValue() requires all controls to be provided; patchValue() allows partial updates
`setValue()` requires an object with keys matching every control, while `patchValue()` only updates the provided keys.
Question 4: How can you run async validators only after all synchronous validators pass?
- Angular does this automatically — async validators are skipped when sync validators fail (Correct answer)
- Set runAsyncOnValid: true in the control options
- Wrap async validators in a Validators.compose() call after sync ones
- Use a custom ValidatorFn that conditionally calls the async function
Correct answer: Angular does this automatically — async validators are skipped when sync validators fail
Angular's built-in behavior is to skip async validators entirely when any synchronous validator returns an error.
Question 5: Which observable on a FormControl emits only when the control's validation status changes?
- statusChanges (Correct answer)
- valueChanges
- validityChanges
- stateChanges
Correct answer: statusChanges
`statusChanges` emits the new status string ('VALID', 'INVALID', 'PENDING', 'DISABLED') whenever it changes.
Question 6: What happens to a FormControl's `errors` property when all validators pass?
- It is set to null (Correct answer)
- It is an empty object {}
- It is undefined
- It is removed from the control
Correct answer: It is set to null
When all validators pass, Angular sets `control.errors` to `null`, not an empty object.
Question 7: Which approach correctly adds a validator to an existing FormControl at runtime without replacing existing validators?
- control.addValidators(newValidator) (Correct answer)
- control.setValidators([...control.validators, newValidator])
- control.pushValidator(newValidator)
- control.validators.push(newValidator)
Correct answer: control.addValidators(newValidator)
`addValidators()` (Angular 12+) appends one or more validators while keeping the existing ones intact.
Angular Web Framework Reactive Forms & Validation 4
Which `FormBuilder` shorthand creates a control with an initial value and a single validator?