---
title: "Reactive Forms and Signal Forms"
chapter: "07"
---

# 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.

```ts
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.