Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Angular reactive forms are strictly typed by default from Angular 14 onward. Use FormGroup for a known set of named controls, FormArray for a changing list of similar controls, and FormRecord for controls under changing keys that share a type. Pay particular attention to nullability and disabled controls: both affect runtime values, not just TypeScript annotations.
What strictly typed reactive forms do
Typed reactive forms let TypeScript check the shape of your form model and the values you read from it, while supporting editor autocomplete. For example, if a control holds a string, code that treats that value as an object with a domain property will fail to compile. The typing improvements apply to reactive forms, not template-driven forms. See Angular’s Strictly typed reactive forms guide.
Reactive forms represent the form as an explicit model in your component and expose observable streams for changes. Angular describes this approach as scalable, reusable, and testable; template-driven forms may suit basic forms managed primarily in the template. See the Angular forms overview and reactive forms guide.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Choose a control collection based on its shape
Start by deciding whether the form’s keys and members are fixed, dynamic, or mixed. The collection type should describe that shape:
#1 Best Overall
| API | Use it when | Shape |
|---|---|---|
FormGroup |
The form has a known set of named controls. | Fixed keys; controls can have different types. |
FormArray |
The form contains a changing sequence of similar controls. | Dynamic positions; homogeneous members. |
FormRecord |
Controls are added under changing names but share a control/value type. | Dynamic keys; homogeneous members. |
UntypedFormArray or an untyped group |
The collection is genuinely heterogeneous and its structure cannot be represented safely by the typed APIs. | Dynamic, mixed control types. |
For a group whose optional controls may be added or removed, declare those controls as optional properties in the group type. TypeScript then permits add/remove operations only for controls declared optional. For fully dynamic heterogeneous groups, Angular notes that the improved type safety is not available; use an untyped group instead. The typed forms guide explains these distinctions.
Account for nullable controls and reset behavior
A control initialized with a string is inferred as FormControl<string|null>. That nullable type reflects what can happen at runtime: calling reset() sets the control’s value to null by default. Code that reads the value must therefore handle the possibility that it is null.
If you create the control with nonNullable: true, its type excludes null, and calling reset() restores the control’s initial value instead. Choose this option only when that reset behavior matches the form’s intended behavior; it is not merely a compile-time promise.
For forms built with a non-nullable builder, Angular’s NonNullableFormBuilder applies this behavior to the controls it creates. Consult the typed forms guide for the builder and control details.
Rank #3
Know when group values are partial
A typed FormGroup’s .value may be partial because disabled controls are omitted. As a result, a field you expect in the object can be undefined. Make consuming code account for that possibility when using .value.
When you need the values of disabled controls as well, use getRawValue(). This is the relevant distinction when serializing a form or otherwise requiring every control’s value, rather than only the enabled controls’ values. Angular documents group value behavior in its FormGroup API reference and typed forms guide.
Use untyped APIs when the form is genuinely dynamic
Angular retains Untyped APIs, including untyped controls, groups, and arrays. They can support incremental migration from older forms, or model a heterogeneous structure that the typed APIs cannot accurately describe. Use typed collections where the shape is known or can be declared; keep the untyped boundary limited to the parts that need it.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsFor more on the available reactive form building blocks, see Angular’s reactive forms guide.
Quick Recap
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.
