代码之家  ›  专栏  ›  技术社区  ›  SamuraiJack

角度异步验证器未按预期工作

  •  1
  • SamuraiJack  · 技术社区  · 6 年前

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

    验证器 shouldBeUnique 是一个不工作的异步验证器 验证器 cannotContainSpace 是一个非异步的自定义验证器,工作正常。 我不知道出了什么问题。

    观点:

    <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>
    

    组件:

    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');
      }
    }
    

    用户名.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);
            });
        } 
    }
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   AT82    6 年前

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

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