question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

valueChanges observable on AbstractControl emits events before its parent's value has changed.

See original GitHub issue

I’m submitting a … (check one with “x”)

[x] bug report
[ ] feature request
[ ] support request

Current behavior When subscribing to valueChanges, and then changing the value via the UI, the form control’s PARENT’s value is not up to date. For example, if my form control starts with a value of 0 and I input 25:

myFormGroup.get('length').valueChanges.subscribe(value => {
    // value = 25
    // myFormGroup.value = { length: 0 }
}

Expected behavior I expect the emit event to occur after the value of the control has propagated to its ancestors:

myFormGroup.get('length').valueChanges.subscribe(value => {
    // value = 25
    // myFormGroup.value = { length: 25 }
}

Interestingly enough, adding a debounceTime(0) fixes the problem, but I feel that this should not be necessary.

myFormGroup.get('length').valueChanges.debounceTime(0).subscribe(value => {
    // value = 25
    // myFormGroup.value = { length: 25 }
}

Minimal reproduction of the problem with instructions http://plnkr.co/edit/o8N09MfJQIOSacx0N7uI?p=preview

This plunker shows a demo of the problem. Notice that the forms value is always one step behind its child control.

What is the motivation / use case for changing the behavior? I want to access the form group’s value from other places after the valueChanges event occurs WITHOUT passing the emitted value around. Besides, the form as a whole should always be in sync with itself.

Please tell us about your environment:

Mac OS X El Capitan, VS Code, npm

  • Angular version: 2.1.1

  • Browser: [all]

  • Language: [all]

Issue Analytics

  • State:open
  • Created 7 years ago
  • Reactions:33
  • Comments:13 (2 by maintainers)

github_iconTop GitHub Comments

20reactions
zakton5commented, May 25, 2017

Hello? Is anyone out there? …This is still a problem.

8reactions
johnrbaurcommented, Jun 23, 2020

I’ve been following this for a while, and this is a disappointing conclusion. In my case, I have a FormGroup with hundreds of controls, in many nested FormGroups/FormArrays. A handful of those controls trigger a calculation based on various other values in the form when they change. It doesn’t make sense to put a handler at the top level of the FormGroup. It seems odd in a FormGroup composed of FormControls, that the valueChanges hook of a control is triggered at the exact moment their respective values are not in sync.

Read more comments on GitHub >

github_iconTop Results From Across the Web

ValueChanges in Angular Forms - TekTutorialsHub
The valueChanges event for the firstname fires immediately after the new values are updated but before the change is bubbled up to its...
Read more >
Form control valueChanges gives the previous value
The valueChanges event is fired after the new value is updated to the FormControl value, and before the change is bubbled up to...
Read more >
AbstractControl - Angular
A multicasting observable that emits an event every time the value of the control changes, in the UI or programmatically. It also emits...
Read more >
Angular valueChanges and statusChanges - ConcretePage.com
valueChanges is a property of AbstractControl that emits an event every time when the value of control changes either using UI or ...
Read more >
Angular Reactive Forms: Tips and Tricks | by Netanel Basal
By default, whenever a value of a FormControl changes, Angular runs the ... Luckily, every control exposes a valueChanges observable that we can...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found