Angular Reactive Forms

Reactive Forms

Build predictable, strictly typed Angular Reactive Forms with clear separation between field validation, cross-field rules and server validation feedback.

1. Typed Reactive Forms (FormGroup, NonNullableFormBuilder, FormArray)

• Use typed FormBuilder / NonNullableFormBuilder (inject(NonNullableFormBuilder)) so form.getRawValue() and form.value carry exact TypeScript types (FormControl<string> vs FormControl<string | null>).
• Remember that form.value omits disabled controls (Partial), whereas form.getRawValue() includes disabled controls with their full type.
• For dynamic lists or repeatable field sets, use FormArray<FormGroup<...>>; for dynamic string keys with uniform control types, use FormRecord<FormControl<...>>.
• When populating existing data into a form, choose patchValue (partial updates) vs reset(model) (which also resets dirty/touched states) deliberately, and pass { emitEvent: false } when hydrating initial data should not trigger valueChanges pipelines.

2. Sync, cross-field and async validation

• Attach single-field validators (Validators.required, custom ValidatorFn) to the FormControl, and cross-field validators (date ranges, password confirmation, totals) to the parent FormGroup.
• For async validators (AsyncValidatorFn), debounce or run on updateOn: 'blur' so every keystroke does not fire a network request, and handle errors gracefully inside the observable.
• Show field errors only when appropriate (control.invalid && (control.touched || formSubmitted)), and call form.markAllAsTouched() when the user attempts to submit an invalid form.

3. Submission lifecycle and server validation errors

• Prevent duplicate submissions by guarding on form.pending || isSubmitting (or using exhaustMap).
• Map field-level server errors onto matching controls via control.setErrors({ server: message }) while preserving a form-level banner/alert for general or unmapped server errors.

Before you finish

• Controls use strict types (NonNullableFormBuilder where reset should restore defaults rather than null).
• disabled, touched, dirty and pending states are handled and reflected in the UI.
• Field, cross-field and server validation errors display clearly without losing user input.