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>...
答
真奇怪,我以为我们可以在表单生成器使用 “Validators.compose()” 函数初始值设定为async参数,但angular2不同意我的意见。 我刚刚更改;
用户名:[ '',Validators.compose([Validators.required, UsernameValidator.cannotContainSpace]),Validators.compose([UsernameValidator.isUnique])],
到
用户名:[ '',Validators.compose([Validators.required, UsernameValidator.cannotContainSpace]),UsernameValidator.isUnique],
和它的作品
编辑: 我也想通了,如果你想在一个组件使用
Validators.composeAsync()
功能使用多个异步验证。