[英]Angular Custom Async Validator returning {__zone_symbol__state: null, __zone_symbol__value: Array(0)}
Am trying to implement custom validators. 我试图实现自定义验证器。 The non-async one ( cannotContainSpaces
) works just fine. 非异步的( cannotContainSpaces
)工作得很好。 The async one ( shouldBeUnique
), which, yes, is trivial at the moment, should be returning promise as I understand, which the Validator object should resolve. 异步的( shouldBeUnique
),其中,是的,目前是微不足道的,应该按照我的理解返回promise,Validator对象应该解析。 It doesn't. 它没有。 The errors collection on the formControl username
shows this in the console: formControl username
上的错误集合在控制台中显示:
{__zone_symbol__state: null, __zone_symbol__value: Array(0)}
Form component: 表单组件:
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)
}
}
Custom validator method: 自定义验证方法:
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);
});
}
}
Relevant HTML: 相关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>
Async validators are to be set as the third argument: 异步验证器将被设置为第三个参数:
username: ['', [sync validators here], [async validators here]]
so change the the following: 所以改变以下内容:
username: new FormControl('',
[
CustomValidators.cannotContainSpaces,
CustomValidators.shouldBeUnique
]),
to: 至:
username: new FormControl('',
[CustomValidators.cannotContainSpaces],
[CustomValidators.shouldBeUnique]
),
DEMO: http://plnkr.co/edit/OceHbSl3atPHdcvNRQDs?p=preview 演示: http : //plnkr.co/edit/OceHbSl3atPHdcvNRQDs?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.