Forms

The data lives in a writable signal; form(model, schema) returns a FieldTree mirroring it; the schema runs once, binding rules like required() to paths; [formField] two-way binds an input to a field, whose state you read by calling it.

Template-driven forms let ngModel and NgForm directives build the FormControl tree implicitly from the markup, bound to plain component properties; reactive forms build that tree explicitly in the class. Template-driven fits small, static forms such as a newsletter sign-up.

Calling reset() on a plain FormControl sets its value to null, so Angular adds null to the inferred type. Passing {nonNullable: true} makes reset() return to the initial value instead, and the type becomes FormControl<string>.

Angular's built-in validators are functions passed to a control, either as the second argument or in the validators option. Each failing validator adds a key to control.errors, which is null when the control is valid.

A ControlValueAccessor bridges a FormControl and a UI element: writeValue pushes the model value into the view, registerOnChange and registerOnTouched hand over callbacks the component calls on user edits and blur, and optional setDisabledState mirrors the disabled status.

Model the line items as a FormArray of FormGroups, add rows with push() and remove them with removeAt(index). In the template, wrap the rows in formArrayName, loop over its controls with @for, and bind each row with [formGroupName]="$index".

setValue() requires a value for every child control and rejects unknown keys, throwing otherwise; patchValue() updates only the keys it receives and ignores the rest. On a single FormControl both behave the same.

Write a ValidatorFn that reads both child values and returns an error such as {passwordMismatch: true}, and attach it to the FormGroup through the validators option. The error lands on the group's errors, not on either control.

formControlName looks for an NG_VALUE_ACCESSOR on its own element. A plain component provides none and the built-in accessors target native inputs, so Angular throws NG01203. Implement ControlValueAccessor and provide NG_VALUE_ACCESSOR with useExisting, forwardRef and multi: true.

A FormArray changes shape through push(), insert(index, c), removeAt(index), setControl(index, c) and clear(). Each one updates the array's value and validity and emits valueChanges unless emitEvent is false, but none marks the array dirty.

NgModel is declared in FormsModule, so a standalone component that does not import FormsModule has no ngModel input and the compiler reports NG8002. Inside a form, NgForm registers each ngModel under its name, so a missing name throws unless the control is marked standalone.

The component implements Validator's validate(control), returning an errors object or null, and provides NG_VALIDATORS with useExisting, forwardRef and multi: true. The forms directive on that element merges it with the FormControl's own validators, so both run and their errors combine.

patchValue and setValue only write values into controls that already exist, and a FormArray never creates rows from data. Rebuild the array first, with clear() and push() per line or setControl('items', newArray), then patch or set the values.

A disabled control is excluded from its parent's value and validity, so form.value omits it while getRawValue() includes it. Disable it through the model with control.disable() or {value, disabled: true}; a [disabled] binding on formControlName only logs a warning.

FormBuilder is an automatically provided service that turns plain values and arrays into FormControl, FormGroup, FormRecord and FormArray instances; it adds no new behaviour. NonNullableFormBuilder builds every implicit control with nonNullable: true, so reset() restores initial values instead of null.

validate() on confirmPassword compares value() with valueOf(path.password) and re-runs when either changes. validateHttp() or validateAsync() on username runs only after the sync rules pass, sets pending() meanwhile, and maps the answer to an error or null.

Implement FormValueControl<string> with value = model(''). [formField] syncs it with the field and fills optional inputs such as disabled, errors and touched; the component emits a touch output on blur. No providers or register callbacks are needed.

submit() marks fields touched, calls onInvalid instead if any rule failed, otherwise runs the action with submitting() true. Errors the action returns, optionally targeting a fieldTree, land in that field's errors() and clear when the user edits it.

#f="ngForm" exposes the NgForm directive: its FormGroup, value, validity, submitted flag, ngSubmit event and resetForm(). ngModelGroup="address" adds a nested FormGroup, so f.value becomes an object keyed by names, with {address: {...}} for grouped fields.

An Angular FormGroup leaves disabled children out of its value, so every key is typed possibly undefined. getRawValue() includes disabled controls and returns the full, non-Partial type, which suits saving a whole settings record.

An AsyncValidatorFn takes the control and returns an Observable or Promise of ValidationErrors or null. Angular runs it only when the sync validators pass, and the control's status is PENDING until the result arrives.

Each symptom is one accessor duty: onTouched is never called when focus leaves the picker, setDisabledState is missing or unrendered, and writeValue sets a plain field the default OnPush view never re-reads. Fix all three, holding displayed state in signals.

Map each metadata entry to a FormControl with validators derived from it, add them to a group, and render with @for plus @switch on the field type using [formControlName]. Handle conditional fields with addControl/removeControl, or disable() to keep their values.

setValue() and patchValue() emit valueChanges synchronously, so two listeners that write into each other's controls recurse until the call stack overflows. Pass {emitEvent: false} for programmatic writes, or use the events stream's source to ignore changes you caused.

For a new signal-based Angular 22 app, Signal Forms: public API since v22, one signal model, inferred types, rules in one schema. Reactive forms stay the better fit for existing reactive codebases and valueChanges-heavy logic.

Template-driven forms register each ngModel with NgForm, and apply model values, in a microtask after the current change-detection pass. During ngAfterViewInit the group is still empty, so setValue() throws; bind values through ngModel or wait for the form to settle.

Use an optional key in a typed FormGroup interface when the key is known but sometimes absent, FormRecord when keys are open-ended but every control has the same type, and UntypedFormGroup only when keys are open-ended and types differ.

Async validators run on every value change by default. Set updateOn: 'blur' on the control, or debounce inside the validator with timer() because Angular cancels the previous check, and make sure every path emits a result and completes.

FormsModule ships validator directives whose selectors match attributes such as required, minlength, pattern and email on an element that also has ngModel; each adds a validator to that control. FormsModule also adds novalidate to forms, so Angular, not the browser, reports errors.