Angular2 Async Form Validator（プロミスを返す）

Question

私は、非同期検証応答を処理するためのAngular2フォーム検証の例を更新しようとしています。こうすることで、HTTPエンドポイントでユーザー名を検証できます。

/**主人公の名前が与えられた正規表現に一致することはできません*/

export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn { 
    return (control: AbstractControl): {[key: string]: any} => { 
    const name = control.value; 
    const no = nameRe.test(name); 
    return no ? {'forbiddenName': {name}} : null; 
    }; 
} 

を：彼らは現在、現在の約束を使用していないし、それがうまく働いて自分のコードを見てみると

私はPromiseを返すように更新しようとしています。何かが好きです：

/** A hero's name can't match the given regular expression */ 
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn { 
    return (control: AbstractControl) => { 
    const name = control.value; 


    return new Promise(resolve => { 
       resolve({'forbiddenName': {name}}); 
     }); 

    }; 
} 

しかし、私が得た結果は、エラーメッセージを表示しません、それは未定義を示しています。

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 && control.dirty && !control.valid) { 
     const messages = this.validationMessages[field]; 
     for (const key in control.errors) { 
      this.formErrors[field] += messages[key] + ' '; 
     } 
     } 
    } 
    } 

は、しかし、私はこれを行うための良い方法のわからない：

私の考えは、それは彼らがエラーを表示し処理している方法とは何かを持っています。

Angular2例：約束を返そうと私の例に https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#live-example

リンク： https://plnkr.co/edit/sDs9pNQ1Bs2knp6tasgI?p=preview

Answer 1

問題はSyncValidator配列にAsyncValidatorを追加することです。 AsyncValidatorsは、SyncValidatorsの後に別の配列で追加されます。

this.heroForm = this.fb.group({ 
    'name': [this.hero.name, [ 
     Validators.required, 
     Validators.minLength(4), 
     Validators.maxLength(24) 
    ], 
    [forbiddenNameValidator(/bob/i)] // << separate array 
    ], 
    'alterEgo': [this.hero.alterEgo], 
    'power': [this.hero.power, Validators.required] 
});