ValueChanges in Angular Forms

The ValueChanges is an event raised by the Angular forms whenever the value of the FormControl, FormGroup or FormArray changes. It returns an observable so that you can subscribe to it. The observable gets the latest value of the control. It allows us to track changes made to the value in real-time and respond to it. For example, we can use it to validate the value, calculate the computed fields, etc.

Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10

How to use ValueChanges

The Angular Forms has three building blocks. FormControl, FormGroup & FormArray. All of these controls extend the AbstractControl base class. The AbstractControl base class implements ValueChanges event

We can subscribe to ValueChanges by getting the reference of the control and subscribing it as shown below

You can also subscribe to the top-level form as shown below.

ValueChanges Example

Create a reactive form as shown below


Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular  

ValueChanges of FormControl

You can subscribe to ValueChanges of a single FormControl as shown below. Here in selectedValue variable, we will get the latest value of the firstname. You can also retrieve the latest value of the firstname using this.reactiveForm.get("firstname").value

ValueChanges shows previous value

But, the top-level form is not yet updated at this point, hence this.reactiveForm.value still shows the previous value of the firstname.

The valueChanges event for the firstname fires immediately after the new value is updated but before the change is bubbled up to its parent. Hence the this.reactiveForm.value still shows the previous value.

You can work around this by waiting for the next tick using setTimeout as shown below.

ValueChanges of FormGroup

The ValueChanges event of FormGroup or FormArray is fired, whenever the value of any of its child controls value changes. For Example, the following ValueChanges will fire even whenever the value of the city, state & pincode changes.

ValueChanges of Form

The following example show we can subscribe to the changes made to the entire form.

EmitEvent & ValueChanges

The ValueChanges event is fired even when the values of the control are changed programmatically. In some circumstances, you might not want to raise the ValueChanges event. To do that we can use the emitEvent: false

In the following example, the ValueChanges event is not fired at all, even though the value of the firstname is changed.

You can use emitEvent: false with the setValue, patchValue, markAsPending, disable, enable, updateValueAndValidity & setErrors methods.

OnlySelf & ValueChanges

WhenonlySelf: true the changes will only affect only this FormControl and change is not bubbled up to its parent. Hence the ValueChanges event of the parent FormGroup does not fire.

For Example, the following code will result in the ValueChanges of the firstname. but not of its parent (i.e. top-level form)

You can use the onlySelf: true with the setValue, patchValue, markAsUntouched, markAsDirty, markAsPristine, markAsPending, disable, enable, and updateValueAndValidity methods

Complete Source Code

reactive.component.ts

reactive.component.html

app.component.html

app.component.ts

app.module.ts

ValueChanges in Template Driven Forms

ValueChanges event can also be used in the template-driven forms. All you need to do is to get the reference to the Form Model in the component as shown below

You can refer to the example code below

template-component.ts

template-component.html

Summary

In this tutorial, we learned how to make use of ValueChanges in Angular Forms. The ValueChanges event is fired whenever the value of the FormControl, FormGroup or FormArray changes. It is an observable and we can subscribe to it. We can then use it to validate the forms. update the computed fields, etc. The ValueChanges event does not fire depending on how we set emitEvent or onlySelf, when updating the value and validity of the form controls.

List of all tutorial on Angular Forms

  1. Angular Forms Tutorial: Fundamental & Concepts
  2. Template Driven Forms in Angular
  3. Set Value in Template Driven forms in Angular
  4. Reactive Forms in Angular
  5. FormBuilder in Reactive Forms
  6. SetValue & PatchValue in Angular
  7. StatusChanges in Angular Forms
  8. ValueChanges in Angular Forms
  9. FormControl
  10. FormGroup
  11. FormArray Example
  12. Build Dynamic or Nested Forms using FormArray
  13. Validations in Reactive Forms in Angular
  14. Custom Validator in Reactive Forms
  15. Passing Parameter to Custom Validator in Reactive Forms
  16. Inject Service into Custom Validator
  17. Validation in Template Driven Forms
  18. Custom Validator in Template Driven Forms

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top