Angular 异步验证器未按预期工作 [英] Angular Async Validator not working as expected

问题描述

我打算在 angular 中实现自定义异步验证器.但它似乎不起作用.控制台中没有错误.

validator shouldBeUnique 是一个不工作的异步验证器验证器 cannotContainSpace 是非异步自定义验证器，它工作得很好.我不知道出了什么问题.

查看:

<div class="form-group"><label for="username">用户名</label><输入formControlName="用户名"id="用户名"类型=文本"class="表单控件"><div *ngIf="username.errors.cannotContainSpace" class="alert alert-danger">不能有空格</div><div *ngIf="username.errors.shouldBeUnique" class="alert alert-danger">shouldBeUniquee</div>

<div class="form-group"><label for="password">密码</label><输入表单控件名称=密码"id="密码"类型=文本"class="表单控件">

<button class="btn btn-primary" type="submit">注册</button></表单>

组件:

导出类 SignupFormComponent {表格 = 新表格组({用户名:new FormControl('', [Validators.required,UsernameValidators.cannotContainSpace, UsernameValidators.shouldBeUnique]),密码:new FormControl('', Validators.required),});获取用户名(){console.log(this.form.get('username').errors.shouldBeUnique);return this.form.get('用户名');}}

用户名.validator.ts

导出类 UsernameValidators {静态 cannotContainSpace(control: AbstractControl): ValidationErrors |空值 {if ((control.value as string).indexOf(' ') != -1) {console.log('noo');返回 { cannotContainSpace: true };}别的 {返回空；}}static shouldBeUnique(control: AbstractControl): Promise{返回新的承诺((解决，拒绝)=> {setTimeout(() => {if (control.value === 'arbaaz')解决({ shouldBeUnique: false });别的解决(空)；}, 2000);});}}

解决方案

异步验证器应该作为第三个参数:

用户名:new FormControl('',[Validators.required, UsernameValidators.cannotContainSpace],[UsernameValidators.shouldBeUnique]),

I am tying to implement custom async validator in angular. But it does not seem to be working. There are no errors in the console.

validator shouldBeUnique is an async validator which is not working validator cannotContainSpace is non async custom validator which works just fine. I am not able to figure out what went wrong.

View:

<form [formGroup]="form">
    <div class="form-group">
        <label for="username">Username</label>
        <input 
        formControlName="username"
            id="username" 
            type="text" 
            class="form-control">

            <div *ngIf="username.errors.cannotContainSpace" class="alert alert-danger">Can not have space</div>
            <div *ngIf="username.errors.shouldBeUnique" class="alert alert-danger">shouldBeUniquee</div>
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input 
        formControlName="password"
            id="password" 
            type="text" 
            class="form-control">
    </div>
    <button class="btn btn-primary" type="submit">Sign Up</button>
</form>

Component:

export class SignupFormComponent {
  form = new FormGroup(
    {
      username: new FormControl('', [Validators.required,
      UsernameValidators.cannotContainSpace, UsernameValidators.shouldBeUnique
      ]),
      password: new FormControl('', Validators.required),


    });

  get username() {
    console.log(this.form.get('username').errors.shouldBeUnique);
    return this.form.get('username');
  }
}

username.validator.ts

export class UsernameValidators {
    static cannotContainSpace(control: AbstractControl): ValidationErrors | null {
        if ((control.value as string).indexOf(' ') != -1) {
            console.log('noo');
            return { cannotContainSpace: true };
        }
        else {
            return null;
        }
    }

    static shouldBeUnique(control: AbstractControl): Promise<ValidationErrors | null> {

        return new Promise((resolve, reject) => {
            setTimeout(() => { 
                if (control.value === 'arbaaz')
                    resolve( { shouldBeUnique: false });
                    else                  
                    resolve(null); 
            }, 2000);
        });
    } 
}

解决方案

Async validators should be placed as the third argument:

username: new FormControl('', 
          [Validators.required, UsernameValidators.cannotContainSpace],
          [UsernameValidators.shouldBeUnique]),

这篇关于Angular 异步验证器未按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！