Question

我尝试为用户名字段实现async（isUnique）和sync（cannotContainSpace）验证功能，我想看看＆＃34;这个用户名已经在使用alert msg，如果textbox值是＆＃34; yener＆＃34; 。同步功能工作正常，但我认为下面的ss可以帮助解释我的问题;

注意：canNotContain同步验证功能正常，之后我添加了isUnique异步函数，发生此异常..

我该如何解决？

usernamevalidator.ts

import {FormControl} from '@angular/forms';

export class UsernameValidator{
    static isUnique(control:FormControl){
        return new Promise((resolve, reject)=>{
            setTimeout(function(){
                debugger
                if(control.value =="yener")
                    resolve({isUnique:true})
                else
                    resolve(null) 
            },1000);
        });        
    }
    static cannotContainSpace(control:FormControl){
        if(control.value.indexOf(' ')>=0)
            return { cannotContainSpace:true };
        return null;
    }
}

postmessage.component.ts

import { Component } from '@angular/core';
import {FormControl,FormGroup,FormBuilder,Validators} from '@angular/forms';
import {UsernameValidator} from '../../validators/usernamevalidator';

@Component({
    moduleId:module.id,
    selector: 'post-message',
    templateUrl: '../../templates/postmessage.component.html'
})
export class PostComponent {
    form : FormGroup;
    constructor(fb:FormBuilder){
        this.form = fb.group({
            username:['', Validators.compose([Validators.required, UsernameValidator.cannotContainSpace]),Validators.compose([UsernameValidator.isUnique])],            
            email:['', Validators.required],         
            message:['', Validators.required]         
        });
    }
    signup(){
        console.log(this.form.value);
    }
 }

这里是html模板：

<form class="from-horizontal" [formGroup]="form" (ngSubmit)="signup()">
        <div class="form-group row">
            <label for="username" class="control-label col-md-2">Name:</label>
            <div class="col-md-6">
                <input type="text" id="username"  class="form-control" formControlName="username">
                <div *ngIf="form.controls['username'].touched && form.controls['username'].errors">
                <div class="alert alert-danger"
                *ngIf="form.controls['username'].errors.required">
                    User name is required.
                </div>
                <div class="alert alert-danger"
                *ngIf="form.controls['username'].errors.cannotContainSpace">
                    User name can not contain space
                </div>
                <div class="alert alert-danger" *ngIf="form.controls['username'].errors.isUnique">
                    This user name already in use.
                </div>
                </div>
            </div>...

Answer 1

很奇怪，我虽然可以在表单构建器初始化程序中使用“Validators.compose（）”函数作为async参数，但angular2不同意我的看法。我刚改变了;

username：[''，Validators.compose（[Validators.required， UsernameValidator.cannotContainSpace]），Validators.compose（[UsernameValidator.isUnique）]，

到

username：[''，Validators.compose（[Validators.required， UsernameValidator.cannotContainSpace]），UsernameValidator.isUnique]

并且有效

EDITED：我还想知道你是否想在组件使用中使用多个异步验证器

Validators.composeAsync（）

功能

angular2异步验证this.subscribe异常？

1 个答案: