Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteAngular reactive forms are strictly typed by default from Angular 14 onward. Use FormGroup for a known set of controls, FormArray for a changing list of similar controls, and FormRecord for changing keys that share a control type. Two runtime details matter especially: a control may be nullable because reset() can set it to null, and a group’s value may omit disabled controls. The official Angular guide covers these rules at Strictly typed reactive forms.
What strict typing changes in reactive forms
Angular’s typed forms model the controls and their values in TypeScript, giving compile-time checks and IDE autocomplete. For example, if a control holds a string, TypeScript will reject code that tries to read a string-only value as though it had a domain property. These typing improvements apply to reactive forms, not template-driven forms. Angular’s forms overview describes reactive forms as an explicit model with observable streams, suited to scalable, reusable, and testable form logic; template-driven forms can suit basic forms managed in the template. See Angular Forms overview and Reactive forms.
As an Amazon Associate I earn from qualifying purchases.
For migration or code that cannot yet be typed reliably, Angular retains the Untyped APIs, such as UntypedFormGroup and UntypedFormArray. They allow gradual adoption, but do not provide the same compile-time guarantees.
Choose a control container based on its shape
| Container | Use it when | Typing implication |
|---|---|---|
FormGroup |
The form has a known set of named controls. | Declare the control keys and their types. Optional control properties can represent controls that may be present only sometimes. |
FormArray |
The form has a dynamic list whose controls share a type. | Its elements are homogeneous. For a list with different control types in different positions, use UntypedFormArray. |
FormRecord |
Control names are dynamic, but controls share a type. | Use it for dynamically named controls with a common control/value type. |
UntypedFormGroup |
The group is fully dynamic and heterogeneous. | Angular notes that this shape has no improved type safety, so an untyped group is appropriate. |
In a typed FormGroup, declaring a control as optional is the type-safe way to express that it may be added or removed. TypeScript then limits those operations to controls declared optional. The current typed forms guide explains these container choices; the FormGroup API reference documents the group API.
#1 Best Overall
Account for null when a control resets
A control initialized with a string is inferred as FormControl<string|null>, not just FormControl<string>. That is because calling reset() without a replacement value can set the control’s value to null. Code that reads the value must handle that possibility.
Set nonNullable: true when the control should stay non-nullable. This is not only a TypeScript annotation: it changes runtime reset behavior. Resetting such a control returns it to its initial value instead of making its value null. Choose the behavior that matches what the form should do, rather than suppressing nullability just to quiet a type error. Angular documents the inference and reset behavior in its strictly typed forms guide.
NonNullableFormBuilder is shorthand for applying non-nullable behavior to the controls it creates. Use it when that reset policy is appropriate across the controls being built; controls created without that behavior should not be assumed non-nullable.
Know what a group’s value includes
A typed group’s .value can be partial because disabled controls are omitted from that value. As a result, a field may be undefined even if it is part of the group’s declared shape. Consumers should account for that possibility when using .value.
Rank #3
Use getRawValue() when the result needs to include disabled controls. The choice is about the data the consumer requires: enabled controls only, or all controls including disabled ones. Angular describes this distinction in the typed forms guide.
Quick Recap
A practical decision sequence
- Identify the shape. Use
FormGroupfor fixed named keys,FormArrayfor a dynamic homogeneous sequence, orFormRecordfor dynamic keys with a shared control type. - Model variability. Mark controls optional in a group’s type if they may be added or removed. If the collection is heterogeneous and cannot be represented safely, use the corresponding untyped API.
- Decide reset semantics. Keep nullable controls if reset may produce
null; choose non-nullable controls if reset should restore the initial value. - Choose the value shape the consumer needs. Use
.valuewhen omission of disabled controls is appropriate; usegetRawValue()when disabled values must be included.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
