title: cannot correctly get angular asynchronous validation error object
body: <p>I am validating user inputs using reactive form with built-in validators and a custom validator. And i would like to 
    provide front-end feedback/errors to users, but i cannot seems to correctly get the validation error object back.
    I am not getting any errors or warnings and console logs seems correct, so i don't really know what went wrong. 
    Here're my code:</p>
  
  <p>----Validators service name.valid.ts:  </p>
  
  <pre><code>import { FormGroup, FormBuilder, Validators, AbstractControl } from '@angular/forms';
  import { AngularFirestore } from 'angularfire2/firestore';
  import { map, take } from 'rxjs/operators';
  
  export class nameValidator {
    static validname(afs: AngularFirestore) {
      return (control: AbstractControl) =&gt; {
        const username = control.value.toLowerCase();
      console.log('username='+username)
        return afs.collection('usrs', ref =&gt; ref.where('name', '==', username) )
         .valueChanges().pipe(
            take(1),
            map(res =&gt; 
              {
                (res.length&gt;=1) ? { 'validname': fail } : null;
              } 
            )
          )
      }
    }
  }
  </code></pre>
  
  <p>----Component relevant excerpts:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { IonicPage, NavController, NavParams } from 'ionic-angular';
  import { AngularFirestoreCollection,AngularFirestoreDocument, AngularFirestore} from 'angularfire2/firestore';
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  import { nameValidator } from  '../../validators/name.valid';
  
  @IonicPage()
  @Component({
    selector: 'page-register',
    templateUrl: 'register.html',
  })
  export class RegisterPage {
  
    formOne: FormGroup;
  
    constructor(public navCtrl: NavController, public navParams: NavParams
      , private afs: AngularFirestore
      , private fmBuilder: FormBuilder) 
      {
  
      this.formOne = this.fmBuilder.group({
        name      : ['TestnameA', Validators.compose([Validators.required ,Validators.pattern('[a-zA-Z]*')])
                      ,nameValidator.validname(this.afs)],
        password  : ['testaa', Validators.compose([Validators.required ,Validators.minLength(5)])],
      }); 
  
    }//end constructor
  </code></pre>
  
  <p>----Template/html relevant excerpts:</p>
  
  <pre><code>&lt;ion-content&gt;
          &lt;form novalidate [formGroup]="formOne"&gt;
              &lt;input id="name" type="text" formControlName="name" required&gt;
  
              &lt;div *ngIf="name.invalid &amp;&amp; name.dirty" &gt;
                  {{ name.value }} is already taken
              &lt;/div&gt;
  
              &lt;div *ngIf="name.valid"&gt;
                  {{ name.value }} is available
              &lt;/div&gt;
  
              &lt;div *ngIf="name.pending"&gt;
                  Checking availability of {{ name.value }}
              &lt;/div&gt;
           &lt;/form&gt;
       &lt;/ion-content&gt;
  </code></pre>
  
  <p>When i input name that is already taken in my firestore db, the name will wrongly still be flagged as valid in the front-end. 
    But from debugging brekapoints in my nameValidator service code, I know that res.length is 1.   So somehow, the validator is able to detect 
  the validation error, but did not return the correct status.
  <br>I have also noted that my validator is asynchronous, thus it is placed as the 3rd argument formbuilderGroup and i have also tried adding delays into my checks, but make no difference.
  <br>Will appreciate any advice. thanks. </p>