返回{__zone_symbol__state:null,__ zone_symbol__value:Array
发布时间:2020-12-17 09:57:44 所属栏目:安全 来源:网络整理
导读:我试图实现自定义验证器.非异步的(cannotContainSpaces)工作得很好.异步的(shouldBeUnique),其中,是的,目前是微不足道的,应该按照我的理解返回promise,Validator对象应该解析.它没有. formControl用户名上的错误集合在控制台中显示: {__zone_symbol__state:
|
我试图实现自定义验证器.非异步的(cannotContainSpaces)工作得很好.异步的(shouldBeUnique),其中,是的,目前是微不足道的,应该按照我的理解返回promise,Validator对象应该解析.它没有. formControl用户名上的错误集合在控制台中显示:
{__zone_symbol__state: null,__zone_symbol__value: Array(0)}
表单组件: 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)
}
}
自定义验证方法: 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);
});
}
}
相关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>
异步验证器将被设置为第三个参数:
username: ['',[sync validators here],[async validators here]] 所以改变以下内容: username: new FormControl('',[
CustomValidators.cannotContainSpaces,CustomValidators.shouldBeUnique
]),
至: username: new FormControl('',[CustomValidators.cannotContainSpaces],[CustomValidators.shouldBeUnique]
),
演示:http://plnkr.co/edit/OceHbSl3atPHdcvNRQDs?p=preview (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
