title: Two Way Binding with Mat-Error causes ngModelChange to fire excessively
body: <p>I have a mat input field in which I bind two-way data with ngModel, I would also like to incorporate mat-error with validation using a formControl.</p>
  
  <pre><code>&lt;mat-form-field [formGroup]="myForm"&gt;
    &lt;input matInput formControlName="myFormName" autocomplete="off" 
           (ngModelChange)="dataChanged(myValue)" [ngModel]="myValue"&gt;
    &lt;mat-error&gt;
      Error! Value outside &lt;strong&gt;{{minVal}}&lt;/strong&gt;
      and &lt;strong&gt;{{maxVal}}&lt;/strong&gt;.
    &lt;/mat-error&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>However this gives me an issue where ngModelChange fires multiple times when the component is initialized and the ngModel value <code>myValue</code> is populated with data through HTTP calls in a service. Something about mixing template driven and reactive forms?</p>
  
  <p>Essentially, what I am trying to achieve is two way bind data to an input while also having mat-errors without having ngModelChange fire unnecessarily just because I populate the input with data on init.</p>