Reactive Forms and Signal Forms

Angular 22 offers established Reactive Forms and newer Signal Forms. Choose from maturity, ecosystem, typing, and project requirements.

Reactive Forms

Reactive Forms use explicit FormControl, FormGroup, and FormArray models. They are production-proven and work well for complex validation and existing component libraries.

Signal Forms

Signal Forms build a typed field tree over a writable signal model, with schema validation and [formField] binding. Angular documentation recommends Reactive Forms when production stability guarantees or existing migrations dominate.

model = signal({ email: '', displayName: '' });
profileForm = form(this.model, path => {
  required(path.email);
  email(path.email);
});

Validation

Client validation improves feedback; the backend remains authoritative. Show errors after a meaningful interaction or submit, associate messages with fields, and focus the first invalid control when helpful.

Async validation

Debounce and cancel remote checks. Distinguish unavailable validation service from “value is invalid.” Never send a request for every keystroke without control.

Submission

Prevent duplicate submission, preserve values on recoverable failure, map server field errors, expose global errors, and make success explicit.

Custom controls

Custom controls must support labels, focus, keyboard behavior, disabled state, errors, touched/dirty semantics, and the selected forms integration. A pretty div is not a form control.

Feynman check

The form model is a draft. Validation is advice until the server accepts the command. Explain each state from untouched to submitting, failed, and complete.