valueChanges observable on AbstractControl emits events before its parent's value has changed.
See original GitHub issueI’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:
- Created 7 years ago
- Reactions:33
- Comments:13 (2 by maintainers)

Top Related StackOverflow Question
Hello? Is anyone out there? …This is still a problem.
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.