我试图实现自定义验证器.非异步的(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]
- ),