In an Angular reactive form, read a control’s current value with its .value property. To respond to future changes, use valueChanges. In a template-driven form, read the component property bound with [(ngModel)]. For a form group, use getRawValue() when you need disabled controls included.
Read a value from a reactive FormControl
A FormControl stores its current value, which you can access synchronously in component code:
As an Amazon Associate I earn from qualifying purchases.
import {FormControl} from '@angular/forms';
name = new FormControl('Ada');
readName() {
return this.name.value;
}You can also display the current value in a template:
<p>Value: {{ name.value }}</p>Angular’s reactive forms guide demonstrates both reading .value and interpolating it. The FormControl API documents getRawValue() as equivalent to value for an individual control.
#1 Best Overall
By default, a control’s TypeScript value type includes null, because a control can be reset. If you need a non-nullable control, configure it as non-nullable; see the FormControl API for the available options.
Watch for value changes
.value gives you a snapshot when you read it. If your component or template needs to respond as the user edits the field or code updates it, use the control’s valueChanges observable instead:
this.name.valueChanges.subscribe(value => {
console.log(value);
});For template-based observation, Angular’s reactive forms guide also shows using AsyncPipe with valueChanges. Choose the approach that fits how the component handles observables and its lifecycle.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Read values from a FormGroup
A group’s .value and getRawValue() differ when controls are disabled:
Rank #3
const enabledValues = this.profileForm.value;
const allValuesIncludingDisabled = this.profileForm.getRawValue();For an enabled FormGroup, .value contains the values of enabled child controls. getRawValue() includes every control, whether enabled or disabled. If the entire group is disabled, Angular documents .value as including all of its controls. This behavior is documented in the FormGroup API.
Read a value in a template-driven form
With template-driven forms, [(ngModel)] synchronizes an input with a component property. Read that property in code or display it with interpolation:
favoriteFramework = '';<input [(ngModel)]="favoriteFramework" />
<p>Framework: {{ favoriteFramework }}</p>In the component, the current value is available as this.favoriteFramework. Angular’s Forms overview explains the distinction: reactive forms define an explicit model in the component, while template-driven forms use directives in the template to create and manage the control and synchronize the bound property. The form control values tutorial demonstrates accessing the bound property in a method.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Choose the form approach that matches your model
| Question | Reactive forms | Template-driven forms |
|---|---|---|
| Where is the model defined? | In the component, as an explicit control or form model. | Through template directives such as [(ngModel)], which synchronize a component property. |
| How do you read a snapshot? | Read control.value or the group’s .value; use getRawValue() when a group snapshot must include disabled controls. |
Read the component property bound to the input. |
| How do you observe changes? | Use the control’s valueChanges observable. |
Use the synchronized component property; NgModel manages the control through the template binding. |
Angular’s Forms overview describes the reactive form model as the source of truth for the form element’s value and status at a given point in time. Use reactive forms when you want to define and access that model directly in component code; use template-driven forms when the template directives and bound properties are the model you want to work with.
Set a value programmatically
To replace a reactive control’s value in code, call setValue():
this.name.setValue('Grace');Angular’s reactive forms guide demonstrates this API. When setting a group or array, the supplied value must match the control structure.
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.
