Question

我正在关注Angular2的在线课程，在我编写的课程中，我遇到了一个错误，但无法弄清楚我哪里出错了。

我试图在网络上查看类似的问题，但找不到任何有效的解决方案。我最接近的是这个答案，angular2 async form validation，但这些建议无关紧要或无效。

这是我的代码：

组件

export class SignUpFormComponent {
   form: ControlGroup;

constructor(fb: FormBuilder){
    this.form = fb.group({
        username: ['', Validators.compose([
            Validators.required, 
            UsernameValidators.cannotContainSpace
        ]), UsernameValidators.shouldBeUnique],
        password: ['', Validators.required]
    });
}

signup(){
    console.log(this.form.value);
}
}

校验

export class UsernameValidators{
static shouldBeUnique(control: Control){
    console.log("taken");
    return new Promise((resolve, reject) => {
        setTimeout(function(){
            if(control.value == "example")
                resolve({ shouldBeUnique: true });
            else
                resolve(null);
        }, 1000);
    });
}
static cannotContainSpace(control: Control){
    if(control.value.indexOf(" ") >= 0){
        return { cannotContainSpace: true };
    }
    return null;
}
}

表格的相关部分

    <input 
        ngControl="username"
        id="username" 
        type="text" 
        class="form-control"
        #username="ngForm">

    <div *ngIf="username.control.pending">Checking for uniqueness...</div>

   <div 
        *ngIf="username.errors.shouldBeUnique"
        class="alert alert-danger">
        Username is already taken.
    </div>

当我在本地运行服务器并开始在表单中键入时，不会显示带有挂起消息的div，如果我在输入字段中键入“example”，则不会弹出错误消息。我错过了什么？感谢。

Answer 1

因为我必须将 tsconfig.json 文件从"target" : "es5"更改为"target" : "es6"，我再次在终端中运行npm install，然后运行{{1解决问题的方法。

Angular2异步验证器未挂起

1 个答案: