title: Angular2 Async Form Validator (return Promise)
body: <p>I'm trying to update the Angular2 Forms Validation example to handle an Async Validation response. This way I can hit an HTTP endpoint to validate a username.</p>
  
  <p>Looking at their code they currently aren't currently using a Promise and it's working just fine:</p>
  
  <p>/** A hero's name can't match the given regular expression */</p>
  
  <pre><code>export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} =&gt; {
      const name = control.value;
      const no = nameRe.test(name);
      return no ? {'forbiddenName': {name}} : null;
    };
  }
  </code></pre>
  
  <p>I'm trying to update to return a Promise. Something like:</p>
  
  <pre><code>/** A hero's name can't match the given regular expression */
  export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
    return (control: AbstractControl) =&gt; {
      const name = control.value;
  
  
      return new Promise( resolve =&gt; {
                 resolve({'forbiddenName': {name}});
          });
  
    };
  }
  </code></pre>
  
  <p>However, the result I get doesn't display the error message, it's showing undefined.</p>
  
  <p><a href="https://i.stack.imgur.com/fTC8M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fTC8M.png" alt="enter image description here"></a></p>
  
  <p>My thought is it has something to do with the way they are handling displaying the errors:</p>
  
  <pre><code>  onValueChanged(data?: any) {
      if (!this.heroForm) { return; }
      const form = this.heroForm;
  
      for (const field in this.formErrors) {
        // clear previous error message (if any)
        this.formErrors[field] = '';
        const control = form.get(field);
  
        if (control &amp;&amp; control.dirty &amp;&amp; !control.valid) {
          const messages = this.validationMessages[field];
          for (const key in control.errors) {
            this.formErrors[field] += messages[key] + ' ';
          }
        }
      }
    }
  </code></pre>
  
  <p>However I'm not sure of a better way of doing this.</p>
  
  <blockquote>
    <p>Angular2 example:
    <a href="https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#live-example" rel="nofollow noreferrer">https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#live-example</a></p>
    
    <p>Link to my example attempting to return Promise:
    <a href="https://plnkr.co/edit/sDs9pNQ1Bs2knp6tasgI?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/sDs9pNQ1Bs2knp6tasgI?p=preview</a></p>
  </blockquote>