我试图实现自定义验证器.非异步的(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>
异步验证器将被设置为第三个参数:
原文链接:https://www.f2er.com/angularjs/140366.htmlusername: ['',[sync validators here],[async validators here]]
所以改变以下内容:
username: new FormControl('',[ CustomValidators.cannotContainSpaces,CustomValidators.shouldBeUnique ]),
至:
username: new FormControl('',[CustomValidators.cannotContainSpaces],[CustomValidators.shouldBeUnique] ),