Free tools Windows power users keep installed
One-click scans. No signup required.
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
In Angular reactive forms, read a control’s current value with control.value; use valueChanges to respond to later updates. For template-driven forms, read the component property bound with [(ngModel)]. For a form group, use getRawValue() when you need values from disabled controls as well as enabled ones.
Read a reactive form control’s current value
A reactive form defines its control in the component. The control’s value property gives you its current value when you read it:
import { FormControl } from '@angular/forms';
name = new FormControl('Ada');
readName() {
return this.name.value;
}To display the value in the template, interpolate the property:
<p>Value: {{ name.value }}</p>Angular’s reactive forms guide demonstrates both reading a snapshot from .value and displaying it in a template. A control’s value type includes null by default because a control can be reset; using nonNullable changes that behavior. See the FormControl API.
#1 Best Overall
React to future value changes
.value is a snapshot: it returns the value at the time you read it. To respond as the user changes the input, use the control’s valueChanges observable. Angular documents both subscribing in component code and using AsyncPipe in a template.
this.name.valueChanges.subscribe(value => {
console.log(value);
});Choose the approach that fits how the component handles observables and its lifecycle; Angular’s guide documents the API but does not prescribe one universal subscription pattern.
Get values from a FormGroup
For a group, choose between .value and .getRawValue() according to whether disabled controls should be included.
| Expression | What it returns |
|---|---|
formGroup.value |
For an enabled group, the values of enabled child controls. Angular documents that an entirely disabled group’s value includes all its controls. |
formGroup.getRawValue() |
The values of all child controls, including disabled controls. |
const enabledValues = this.profileForm.value;
const allValuesIncludingDisabled = this.profileForm.getRawValue();This distinction matters when the object is displayed or submitted: disabled fields may be absent from an enabled group’s .value. The FormGroup API documents the group behavior.
Rank #3
Read a template-driven form value
With template-driven forms, [(ngModel)] synchronizes an input with a component property. Read that property in component code or interpolate it in the template:
favoriteFramework = '';<input [(ngModel)]="favoriteFramework" />
<p>Framework: {{ favoriteFramework }}</p>Component methods can read this.favoriteFramework. The Angular Forms overview explains that template-driven forms rely on template directives, while NgModel manages the control and synchronizes the bound property.
Choose reactive or template-driven access
| Approach | Where the model is defined | Read a current value | Observe changes |
|---|---|---|---|
| Reactive | Explicitly in the component | Read the control’s .value |
Use valueChanges |
| Template-driven | Through directives in the template and a bound component property | Read the property bound with [(ngModel)] |
Use the synchronized property in the component or template |
Reactive forms provide a model in the component and synchronous access to its value and status. Template-driven forms center on template directives and the synchronized property. Angular’s Forms overview describes the distinction.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Set a reactive control’s value in code
To replace a control’s value programmatically, call setValue():
this.name.setValue('Grace');When setting values on a group or array, the supplied object or array must match its control structure. See the 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.
