Валидатор Aysnc угловой 6 - PullRequest
Новая
       11

Валидатор Aysnc угловой 6

1 голос
/ 12 апреля 2019

Я пытаюсь проверить доступность имени пользователя при вводе имени пользователя, используя остальные API.Я использую угловые формы для валидаторов.Из бэкэнда я получаю true, если имя пользователя существует, и false, если нет.Я использую приведенный ниже код: 

this.registerForm = this.formBuilder.group({
            userName: ['', [Validators.required, this.userNameValidator.bind(this)]],
        });

userNameValidator(control: AbstractControl) {
    setTimeout(() => {
        return this.adminService.checkUserName(control.value).subscribe((Response:any)=>{
            return Response._body ? true : {'invalidUserName': true};
        })
    }, 1000);}

Показывает нулевое свойство ошибок в элементе управления формы

1 Ответ

3 голосов
/ 12 апреля 2019

В вашем коде есть несколько ошибок.

  1. Вы на самом деле ничего не возвращаете из метода userNameValidator, вы должны вернуть наблюдаемое (или обещание).
  2. Вы не должны использовать setTimeOut, вместо этого используйте timer из библиотеки RxJs, поскольку это возвращает наблюдаемое.
  3. Используйте switchMap для результата таймера, чтобы вернуть вашу наблюдаемую из вашего асинхронного вызова
  4. Вы должны вернуть результат с помощью map и не подписываться, проверка элементов управления подпишется на возвращаемую наблюдаемую.
  5. Если проверка прошла успешно, вы должны вернуть null
import { ValidationErrors } from '@angular/forms';
import { Observable, timer } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';

userNameValidator(control: AbstractControl): Observable<ValidationErrors | null> {
    return timer(1000).pipe(switchMap(() => {
        return this.adminService.checkUserName(control.value).pipe(map((Response:any)=>{
            return Response._body ? null : {'invalidUserName': true};
        }));
    }));
}
...