angular2异步验证this.subscribe异常？

我尝试实现用户名字段的异步（isUnique）和同步（cannotContainSpace）验证功能，我想看到“这个用户名已经在使用alert msg，如果textbox的值是”yener“同步功能工作正常，但我认为ss下面可以帮助解释了我的问题;angular2异步验证this.subscribe异常？

注：canNotContain同步验证FUNC工作正常，aafter我加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>...

来源

2016-11-24 TyForHelpDude

真奇怪，我以为我们可以在表单生成器使用 “Validators.compose（）” 函数初始值设定为async参数，但angular2不同意我的意见。我刚刚更改;

用户名：[ ''，Validators.compose（[Validators.required， UsernameValidator.cannotContainSpace]），Validators.compose（[UsernameValidator.isUnique]）]，

到

用户名：[ ''，Validators.compose（[Validators.required， UsernameValidator.cannotContainSpace]），UsernameValidator.isUnique]，

和它的作品

编辑：我也想通了，如果你想在一个组件使用

Validators.composeAsync（）

功能使用多个异步验证。

来源

2016-11-24 10:54:32 TyForHelpDude

angular2异步验证this.subscribe异常？

回答

相关问题