返回{__zone_symbol__state：null,__ zone_symbol__value：Array(0)}的Angular自定义异步验证器

我试图实现自定义验证器.非异步的(cannotContainSpaces)工作得很好.异步的(shouldBeUnique),其中,是的,目前是微不足道的,应该按照我的理解返回promise,Validator对象应该解析.它没有. formControl用户名上的错误集合在控制台中显示：

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

表单组件：

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>

异步验证器将被设置为第三个参数：

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

所以改变以下内容：

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

至：

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

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

原文地址：https://www.jb51.cc/angularjs/140366.html