title: Angular reactive forms: valueChanges doesn't work as expected
body: <p>I'm learning to use Reactive Forms in Angular 6, so forgive me if this question is stupid, but here's my issue:</p>
  
  <p>I want to monitor for changes of a certain value in my reactive form, because when a change occurs I need to run some logic that recalculates stuff based on the new values. So I've tried doing this:</p>
  
  <pre><code>this.inputGroup = formBuilder.group({
    myControl: 'something'
  });
  
  this.inputGroup.get('myControl').valueChanges.subscribe(newVal =&gt; {
    console.log("new value", newVal); //Prints the correct new value
    console.log("actual value", this.inputGroup.value.myControl); //Prints the previous (old) value!
  
    this.someFuncThatExpectsTheValuesToBeUpToDate(); //This will find the OLD value inside this.inputGroup.value.myControl, instead of the new one!
  });
  </code></pre>
  
  <p>but, as you can see from the comments I put in the code, this doesn't work because <code>valueChanges</code> seems to get called <strong>before</strong> the value is actually changed in the model! Is this intended behavior? The method signature for <code>valueChanges</code> says:</p>
  
  <blockquote>
    <p>A multicasting observable that emits an event every time the value of
    the control changes, in the UI or programmatically.</p>
  </blockquote>
  
  <p>so I would have assumed that it was called AFTER the value was changed in the form, but apparently not... is this correct? And if so, how can I detect when the value has actually changed in the control?</p>
  
  <p><strong>EDIT</strong>: there seems to be some confusion (as always here on SO :D) about WHY I want my function to access the data directly from the Form group, instead of passing the new value to the function itself. This is easily explained: the function gathers data from several form groups and uses this data to do some side-calculations. By accessing the data directly from the form groups, the function is generic and can be invoked from anywhere. If I start to put input parameters there, this would break. Take this example:</p>
  
  <pre><code>someFuncThatExpectsTheValuesToBeUpToDate(){
    let val1 = inputGroup.value.myControl;
    let val2 = someOtherFormGroup.value.myOtherControl;
    let val3 = yetAnotherFormGroup.value.someOtherControl;
    //do something with the vals
  }
  </code></pre>
  
  <p>With this function, I can invoke it from anywhere and it will work. But if I need to pass in the values each time, I would need 3 different functions with different signatures to do the same thing, much more messy and complicated.</p>