title: Angular 2.3.1 async custom validator promise doesn't resolve
body: <p>I've got a sign up form and I want to check that if the username is already taken or not. To achieve this I'm using promises now.
  My sign up component looks like this:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
  import { UserService } from '../shared/user.service'
  
  @Component({
    selector: 'app-auth',
    providers: [],
    templateUrl: './auth.component.html',
    styleUrls: ['./auth.component.css']
  })
  
  export class AuthComponent implements OnInit {
  
    // Tabs for log in or sign up
    tab = 'signup';
  
    // Sign up form
    signUpForm: FormGroup;
  
    // Log in form
    logInForm: FormGroup;
  
    constructor(private formBuilder: FormBuilder, private ussr: UserService) {
       this.signUpForm = this.formBuilder.group({
         'username': [null, [
           Validators.required, Validators.minLength(4), Validators.maxLength(12), this.ussr.getUserNameFromServer
         ]], 
         'email': '', 
         'password': '' });
      this.logInForm = this.formBuilder.group({ 'username': '', 'password': '' });
    }
  
    ngOnInit() {
    }
  
    activeTab(tab: string) {
      this.tab = tab;
    }
  
    signUpSubmit(value: any) {
      console.log(value);
    }
  
  }
  </code></pre>
  
  <p>And the UserService:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Response, Headers, RequestOptions  } from '@angular/http';
  import { FormControl } from '@angular/forms';
  import 'rxjs/add/operator/map';
  
  @Injectable()
  export class UserService {
  
      constructor (private http: Http) {}
  
      private extractData (res: Response) {
          let body = res.json();
          return body || { };
      }
  
      getUserNameFromServer = (c: FormControl) =&gt; {
  
          return new Promise (
               (resolve, reject) =&gt; {
                   this.http.get('https://jsonplaceholder.typicode.com/users/1')
                   .map(this.extractData)
                   .subscribe(
                       (res: any) =&gt; {
                           if (c.value == res.username) {
                               console.log('taken')
                               resolve({'usernameTaken': true})
                           } else {
                               console.log('is not taken')
                               resolve(null)
                           }
                       },
                       err =&gt; { console.log(err) }
                   )   
               }
           );
  
      }
  
  }
  </code></pre>
  
  <p>I already read some blog posts about this topic, and I also checked two SO questions (<a href="https://stackoverflow.com/questions/35521583/how-to-implement-custom-async-validator-in-angular2">1</a>, <a href="https://stackoverflow.com/questions/38900747/http-doesnt-work-in-angular-2-custom-asynchronous-validation">2</a>), but I can't get it to work.
  The service successfully got the server's answer, but when I call it inside the component's validator, the form is going to be invalid every time. </p>
  
  <p>In the examples above, they just call it in the validator section, and I guess the ng2 do the rest of the work in the background, or am I wrong? How is the validator got the promise's value?</p>