title: Angular async validators added inline with ReactiveForms are triggered on new
body: <p>I have a custom control/component which I hook an async validator to in the ReactiveForms style e.g.</p>
  
  <pre><code>this.myform = new FormGroup({
    mycontrol : new FormControl('', [], this.myvalidator.bind(this)),
  </code></pre>
  
  <p>If I break on the myvalidator function, I can see that it's called multiple times, the main times being on "new FormControl" and then again when the control is assigned a value.</p>
  
  <p>By hard coding the response from the validation to something like:</p>
  
  <pre><code>return of({ error: 'done broke...'});
  </code></pre>
  
  <p>The control receives the error in its "errors" object and the UI shows the "ng-invalid" class. All good..</p>
  
  <p>I actually need my validator to know what control we're validating, in order to get the correct response from the service.  To do this I have some method named "getControlName(control)" which uses the control.parent to find the name of the current control (clunky but works for now).</p>
  
  <p>Problem is! on instantiation of FormControl where we pass in the validator, that actually seems to trigger the myvalidator function, at which point the control.parent is undefined.  So I simply add a check for control.parent and return of(null) when there isn't one... except that this doesn't work.  </p>
  
  <p>If the validator function looks like this:</p>
  
  <pre><code>testVal(control: AbstractControl): Observable&lt;{}&gt; {
    if (!control.parent) { 
      return of(null); 
    } else {
      return of({ error: 'there is a parent this time' });
    }
  </code></pre>
  
  <p>Then I get an error on the errors object of my control and the ng-invalid is set on the class list.  Great!</p>
  
  <p>But if my method looks more like this:</p>
  
  <pre><code>  testVal(control: AbstractControl): Observable&lt;{}&gt; {
    if (!control.parent) { return of(null); }
  
      const field = this.getControlName(control);
      const r = this.myservice.validate(field).
  ... service stuff ...
      return r; // this is the Observable from my service method
  </code></pre>
  
  <p>}</p>
  
  <p>Then I get an error on my errors object, but the ng-valid class is still there!  </p>
  
  <p>Why the difference, and what am I doing wrong here?</p>
  
  <p>Thanks :)</p>