返回{__zone_symbol__state:null,__ zone_symbol__value:Array(0)}的Angular自定义异步验证器

前端之家收集整理的这篇文章主要介绍了返回{__zone_symbol__state:null,__ zone_symbol__value:Array(0)}的Angular自定义异步验证器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图实现自定义验证器.非异步的(cannotContainSpaces)工作得很好.异步的(shouldBeUnique),其中,是的,目前是微不足道的,应该按照我的理解返回promise,Validator对象应该解析.它没有. formControl用户名上的错误集合在控制台中显示
  1. {__zone_symbol__state: null,__zone_symbol__value: Array(0)}

表单组件:

  1. import { CustomValidators } from './custom.validators';
  2. import { Component,Input } from '@angular/core';
  3. import { FormGroup,FormControl,Validators } from '@angular/forms';
  4.  
  5. @Component({
  6. selector: 'signup-form',templateUrl: './signup-form.component.html',styleUrls: ['./signup-form.component.css']
  7. })
  8. export class SignupFormComponent {
  9.  
  10. form = new FormGroup({
  11. username: new FormControl('',[
  12. CustomValidators.cannotContainSpaces,CustomValidators.shouldBeUnique
  13. // Validators.email,]),password: new FormControl('',Validators.required)
  14. })
  15.  
  16. get username() {
  17. return this.form.get('username');
  18. }
  19.  
  20. keyPressed(){
  21. console.log(this.username.errors)
  22. }
  23.  
  24. }

自定义验证方法

  1. import { AbstractControl,ValidationErrors } from "@angular/forms";
  2.  
  3. export class CustomValidators {
  4. static cannotContainSpaces(control: AbstractControl) : ValidationErrors | null {
  5. if ((<string>control.value).indexOf(' ') >= 0)
  6. return { cannotContainSpaces: true};
  7. return null;
  8. }
  9.  
  10. static shouldBeUnique(control: AbstractControl) : Promise<ValidationErrors | null> {
  11. return new Promise((resolve,reject) => {
  12. setTimeout(function() {
  13. if (control.value === 'treve')
  14. resolve({shouldBeUnique: true});
  15. else resolve(null);
  16. },2000);
  17. });
  18. }
  19. }

相关HTML:

  1. <form [formGroup]="form">
  2. <div class="form-group">
  3. <label for="username">Username</label>
  4. <input
  5. (keyup) = "keyPressed()" (blur) = "keyPressed()"
  6. formControlName="username"
  7. id="username"
  8. type="text"
  9. class="form-control">
  10. <div *ngIf="username.touched && username.invalid" class="alert alert-danger">
  11. <div *ngIf="username.errors.cannotContainSpaces">Username must not contain spaces</div>
  12. <div *ngIf="username.errors.shouldBeUnique">Sorry,that username has been taken</div>
  13. </div>
  14. </div>
异步验证器将被设置为第三个参数:
  1. username: ['',[sync validators here],[async validators here]]

所以改变以下内容

  1. username: new FormControl('',[
  2. CustomValidators.cannotContainSpaces,CustomValidators.shouldBeUnique
  3. ]),

至:

  1. username: new FormControl('',[CustomValidators.cannotContainSpaces],[CustomValidators.shouldBeUnique]
  2. ),

演示:http://plnkr.co/edit/OceHbSl3atPHdcvNRQDs?p=preview

猜你在找的Angularjs相关文章