What event will be called on input AFTER all values of reactive forms are updated

Question

What is correct way in Angular (v.5 or v.6) to emit event after specific input of reactive form is changed?

I've already tried this aproaches:

1. (ngModelChange)="doSomething($event)" (html, basic event)

2. (bsValueChange)="doSomething($event)" (html, ngx-bootstrap specific event)

3. basic reactive form solution for one input - subscribe for event (ts) like:

this.reactiveForm.get('inputName').valueChanges.subscribe(
  value => { this.doSomething(value); }
);

But nothing works in all situations.

Testing:

1. set input value A

2. change input value to B

Expected behavior:

• All reactiveForm.value items in doSomething() method have current values.

Results:

Approach 1. is not possible to simulate this bug in demo. This is working in my demo but not working in my large project. After I set first date A and then select date B, my "doSomething" which log actual date of field (and value of $event) in reactive form return A for actual field value. Demo working ok, but I don`t know why I can not achieve such behavior in my project.

Approach 2. not working at all. This is specific event for ngx-bootstrap, but after I select date B I again get date A in log.

Approach 3. not working at all. This is pure reactive form solution. You can test it on my demo on the last input. If you type A and then B, log from reactiveForm.value['item'], after you type B is only A. So even if you subscribe to valueChanges event of reactiveForm input, value is not changed.

My question is:
What can I use to catch event for one field of reactive form after this reactive form values are updated?

Here is StackBlitz code DEMO with example

PS: First of all I thought it was a problem of ngx-bootstrap extension, but it also does not works for pure input of reactive form.

Answer 1

Atiris, the answer is: 3.

But see that is different

this.reactiveForm.value['testDateE'] //or this.reactiveForm.value.testDateE

than

this.reactiveForm.get('testDateE').value;

Is the reason because if you want to check some in the html you must use the second way. When we send a submit, we submit the reactiveForm.value and there are no problem, Equally if you write {{reactiveForm.value |json}} you'll see the actual values