title: Angular reactive form custom async validator, handle http error
body: <p>I have an async validator that makes a http call to do back end validation. Need to handle http call fail and can't find any way to catch that. Any help figuring out the correct setup for that will be appreciated. Below is my current setup</p>
  
  <p>The form control </p>
  
  <pre><code>this.email = new FormControl('', {
    validators: [
      Validators.email,
      Validators.required,
      Validators.maxLength(100)
      )
    ],
    asyncValidators: this.checkEmail.bind(this),
    updateOn: 'blur'
  });
  </code></pre>
  
  <p>My async validator</p>
  
  <pre><code>checkEmail(control: AbstractControl) {
  return this.emailService.checkEmail(control.value).map(res =&gt; {
  
      if (this.res.invalid) {
        return {email: true};
      }
     return null;    
  });
  }
  </code></pre>
  
  <p>The http call in service layer</p>
  
  <pre><code> public checkEmail(email: string): Observable&lt;any&gt; {
      if (emailAddress) {
       return this.http.get(environment.API_URL + 'register/checkEmail?email=' + emailAddress);
     } else {
       return empty();
     }
   }
  </code></pre>