Как я могу сделать тайм-аут углового асинхронного валидатора

Question

Во-первых, у меня есть этот асинхронный валидатор для углового для проверки пароля, и я пытаюсь сделать задержку для сообщения в html, но это не похоже на работу, как мне нужно вызвать его на работу. Я проверил через консоль.log (control) в функции, и он возвращает ожидаемый результат, но он все равно появляется сразу после того, как я вызвал его в HTML-коде.

Я приведу пример кода здесь.Здесь я делаю форму с валидаторами.

constructor(fb: FormBuilder)
  {
    this.form = fb.group({
      password: ['', Validators.required,this.asyncValidator],
      confirmPassword: ['', Validators.required,this.asyncValidator]
    })
  }

Вот функция проверки.

asyncValidator(control:FormControl):any{
    return new Promise(
      (resolve) =>{
        setTimeout(() => {
          if((control.password).length < 6 && (control.password).length > 1)
              console.log("true");
          console.log("false");
          resolve(null);
        },2000);
      }
    );
 }

Вот HTML-код, который я использую на странице, чтобы увидеть отложенное сообщение (это не работает).

<div class="alert alert-danger"
  *ngIf="asyncValidator(this.form.controls.password)">Password too short</div>

Как мне использовать асинхронный валидатор, чтобы мое сообщение в HTML появлялось с задержкой в ​​2 секунды?

Answer 1

Вы, похоже, неправильно поняли, что делают асинхронные валидаторы и как они используются и пишутся.Следовательно, есть много проблем с вашей реализацией.Вот как вы можете их исправить.

1.Избавьтесь от кода в constructor и переместите его в ngOnInit:

ngOnInit() {
  this.form = this.fb.group({
    password: ['', [Validators.required], [this.asyncValidator.bind(this)]],
    confirmPassword: ['', [Validators.required], [this.asyncValidator.bind(this)]]
  });
}

Обоснование: constructor s должно быть тощим в соответствии с Misko Hevery

Опытные разработчики соглашаются, что компоненты должны быть дешевыми и безопасными в изготовлении.

И, async валидаторы, передаются в качестве третьего аргумента FormControl

Кроме того, так как asyncвалидаторы - это функции, которые будут вызываться Angular, а не мы, нам нужно явно установить контекст this, вызвав bind(this) в асинхронной функции валидатора.

2.Теперь обещание, возвращаемое asyncValidator, должно разрешиться до null в случае отсутствия ошибки и объекта ошибки в случае ошибки:

asyncValidator(control: FormControl): any {
  return new Promise(
    (resolve) => {
      setTimeout(() => {
        if ((control.value).length < 6 && (control.value).length > 1)
          resolve(null);
        else
          resolve({
            shortPassword: true
          });
      }, 2000);
    }
  );
}

3.Создайте функцию, которая будет возвращать логическое значение в зависимости от того, затронут ли FormControl и есть ли ошибка, которую вы возвращаете из функции asyncValidator:

getFormControlError(controlName) {
  const control = this.form.get(controlName);
  return control.touched && control.errors && control.errors.shortPassword;
}

Обоснование: Это то, что мы будем использовать в нашем шаблоне.

4.Обновите свой шаблон, чтобы отображать ошибку только в том случае, если поле ввода было затронуто и имеет эту ошибку:

<form [formGroup]="form">
  Password: <input type="text" formControlName="password">
  <div class="alert alert-danger"
  *ngIf="getFormControlError('password')">Password too short</div>

  <br><br>

  Confirm Password: <input type="text" formControlName="confirmPassword"> 
  <div class="alert alert-danger"
  *ngIf="getFormControlError('confirmPassword')">Password too short</div>
  <br> 
  <br>
</form>

---

Вот Рабочий образец Stackblitz для вашей ссылки.