How can I properly emit an event in Angular (v.5 or v.6) after a specific input of a reactive form has been changed?
Here are the approaches I have tried:
(HTML, basic event)(ngModelChange)="doSomething($event)"
(HTML, ngx-bootstrap specific event)(bsValueChange)="doSomething($event)"Basic solution for reactive form with one input - subscribe to event (TS) like:
this.reactiveForm.get('inputName').valueChanges.subscribe(
value => { this.doSomething(value); }
);
However, none of these methods work in all scenarios.
Testing:
Set input value
AChange input value to
B
Expected behavior:
- All items in
reactiveForm.valueshould have their current values when callingdoSomething().
Results:
Approach 1: Unable to replicate this issue in demo. It works on my demo, but not in my larger project. When setting date A and then selecting date B, the "doSomething" function logs date A as the actual field value. The demo works fine, but the behavior is inconsistent in the project.
Approach 2: Does not work at all. This is a specific event for ngx-bootstrap, but even after selecting date B, it still logs date A.
Approach 3: Also does not work. This is a pure reactive form solution. You can test it on my demo with the last input. Typing A followed by B results in only logging A as the value of reactiveForm.value['item']. Despite subscribing to the valueChanges event of the reactive form input, the value remains unchanged.
My question is:
What can I use to capture an event for a single field of a reactive form after the values in the reactive form have been updated?
Here is the StackBlitz code DEMO with example
PS: Initially, I suspected it was a problem with the ngx-bootstrap extension, but the issue also persists with pure reactive form inputs.