Angular 6: функция setTimeout не работает в моем пользовательском валидаторе

Question

Я следую учебному пособию, чтобы выполнить асинхронную проверку в Angular. То, чего я пытаюсь добиться, - это мой пользовательский валидатор, который shouldBeUnique должен вызываться с задержкой в ​​2 секунды. Я использую функцию setTimeout, но она не работает. даже сообщение об ошибке не отображается в div.

Вот мой пользовательский файл ошибок проверки.

import { AbstractControl, ValidationErrors } from '@angular/forms';

export class UsernameValidator {
   static cannotContainSpace(control: AbstractControl): ValidationErrors | null {
        if ((control.value as string).indexOf(' ') >= 0 ) {
            return { cannotContainSpace: true };
        }
        return null;
    }

    static shouldBeUnique(control: AbstractControl): Promise<ValidationErrors | null> {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                if (control.value === 'bilal') {
                    resolve({shouldBeUnique: true});
                } else {
                    resolve(null);
                }
            }, 2000);
        });
    }
}

HTML-файл.

<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.touched && username.invalid" class="alert alert-danger">
            <div *ngIf="username.errors.required">username is required</div>
            <div *ngIf="username.errors.minlength">
                minlength {{username.errors.minlength.requiredLength}} is required
            </div>
            <div *ngIf="username.errors.cannotContainSpace">
                cannot contain space
            </div>
            <div *ngIf="username.errors.shouldBeUnique">
                    username should b unique
                </div>
        </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>

Введите файл сценария

import { Component } from '@angular/core';
import {FormGroup, FormControl, Validators} from '@angular/forms';
import { UsernameValidator } from './username.validator';
@Component({
  // tslint:disable-next-line:component-selector
  selector: 'signup-form',
  templateUrl: './signup-form.component.html',
  styleUrls: ['./signup-form.component.css']
})
export class SignupFormComponent {

  form = new FormGroup({
    username: new FormControl('', [
      Validators.required,
      Validators.minLength(3),
      UsernameValidator.cannotContainSpace,
      UsernameValidator.shouldBeUnique
    ]),
    password: new FormControl('' , Validators.required)
  });
  get username() {
    return this.form.get('username');
  }

}

Answer 1

Асинхронные валидаторы должны быть помещены после валидаторов,

export declare class FormControl extends AbstractControl {
  constructor(
    formState?: any,
    validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, 
    asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null
);

new FormGroup({
    username: new FormControl('', 
    [
      Validators.required,
      Validators.minLength(3),
      UsernameValidator.shouldBeUnique
    ], 
    [
     UsernameValidator.cannotContainSpace,
    ])
  });

Answer 2

Асинхронные валидаторы должны быть третьим аргументом FormControl, поэтому вы должны инициализировать свой так:

form = new FormGroup({
    username: new FormControl('', 
    [
      // regular validators
      Validators.required,
      Validators.minLength(3),
      UsernameValidator.cannotContainSpace
    ], 
    [
      // async validators
      UsernameValidator.shouldBeUnique
    ]),
    password: new FormControl('' , Validators.required)
  });