Блог

Я пытаюсь проверить доступность имени пользователя при вводе имени пользователя с помощью rest 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);}
  

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

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

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