title: Async Validator not working with Template driven Forms in Angular
body: <p>I have created a Async Validator for my Template Driven form .</p>
  
  <pre><code>import {Directive, forwardRef} from "@angular/core";
  import {NG_ASYNC_VALIDATORS, Validator, AbstractControl, AsyncValidator} from "@angular/forms";
  import {Observable} from "rxjs";
  
  
  @Directive({
    selector: '[asyncValidator][ngModel]',
    providers: [{
      provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() =&gt; AsyncAgeValidator), multi: true
  
    }]
  })
  
  export class AsyncAgeValidator implements Validator{
  
    validate(c: AbstractControl): Observable&lt;{[key : number] : any}&gt;{
        return this.validateAgeObservable(c.value);
    }
  
    validateAgeObservable( age: number ) {
      return new Observable(observer =&gt; {
  
        if( age === 20 ) {
          observer.next(null);
        } else {
          observer.next({asyncInvalid: true});
          console.log('validate');
        }
      });
    }
  
    }
  
  
  }
  </code></pre>
  
  <p>I am using it in my Template as follows but i do not get the Error message i expect from the validator in the template. the call is going to the validator but i guess it is not registering the observable in the component.</p>
  
  <pre><code>&lt;md-input-container&gt;
    &lt;input mdInput type="number" name="age" [(ngModel)]="user.age" placeholder="Age" required asyncValidator&gt;
  &lt;/md-input-container&gt;
  </code></pre>