角度カスタム非同期検証ツールが{__zone_symbol__state：null、__zone_symbol__value：Array（0）}を返す

Question

カスタムバリデータを実装しようとしています。非同期のもの（cannotContainSpaces）はうまく動作します。私が理解しているように、現時点では些細な非同期のもの（shouldBeUnique）は、Validatorオブジェクトが解決すべきものです。それはしません。 formControl username上のエラーコレクションは、コンソールでこれを示しています

{__zone_symbol__state: null, __zone_symbol__value: Array(0)} 

Formコンポーネント：

import { CustomValidators } from './custom.validators'; 
import { Component, Input } from '@angular/core'; 
import { FormGroup, FormControl, Validators } from '@angular/forms'; 

@Component({ 
    selector: 'signup-form', 
    templateUrl: './signup-form.component.html', 
    styleUrls: ['./signup-form.component.css'] 
}) 
export class SignupFormComponent { 

    form = new FormGroup({ 
    username: new FormControl('', [ 
     CustomValidators.cannotContainSpaces, 
     CustomValidators.shouldBeUnique 
     // Validators.email, 
    ]), 
    password: new FormControl('', Validators.required) 
    }) 

    get username() { 
    return this.form.get('username'); 
    } 

    keyPressed(){ 
    console.log(this.username.errors) 
    } 

} 

カスタム検証方法：

import { AbstractControl, ValidationErrors } from "@angular/forms"; 

export class CustomValidators { 
    static cannotContainSpaces(control: AbstractControl) : ValidationErrors | null { 
     if ((<string>control.value).indexOf(' ') >= 0) 
      return { cannotContainSpaces: true}; 
     return null; 
    } 

    static shouldBeUnique(control: AbstractControl) : Promise<ValidationErrors | null> { 
     return new Promise((resolve, reject) => { 
      setTimeout(function() { 
       if (control.value === 'treve') 
        resolve({shouldBeUnique: true}); 
       else resolve(null); 
      }, 2000); 
     }); 
    } 
} 

関連HTML：

<form [formGroup]="form"> 
    <div class="form-group"> 
     <label for="username">Username</label> 
     <input 
      (keyup) = "keyPressed()" (blur) = "keyPressed()" 
      formControlName="username" 
      id="username" 
      type="text" 
      class="form-control"> 
     <div *ngIf="username.touched && username.invalid" class="alert alert-danger"> 
      <div *ngIf="username.errors.cannotContainSpaces">Username must not contain spaces</div> 
      <div *ngIf="username.errors.shouldBeUnique">Sorry, that username has been taken</div> 
     </div> 
    </div> 

Answer 1

の非同期バリデータは、3番目の引数として設定される。

username: ['', [sync validators here], [async validators here]] 

ので、次のように変更します

username: new FormControl('', 
    [ 
    CustomValidators.cannotContainSpaces, 
    CustomValidators.shouldBeUnique 
    ]), 

に：

username: new FormControl('', 
    [CustomValidators.cannotContainSpaces], 
    [CustomValidators.shouldBeUnique] 
), 

DEMO：http://plnkr.co/edit/OceHbSl3atPHdcvNRQDs?p=preview