Угловая пользовательская проверка с асинхронной службой

Question

Я использую Angular с базой данных Firestore (с Angularfire2). Чтобы проверить, существует ли уже имя пользователя, я создал специальный класс проверки с функцией проверки. К сожалению, независимо от того, возвращает ли функция validate значение null или {emailTaken: true}, форма остается недействительной. Если я переписываю функцию, возвращающую только null, она работает, поэтому я полагаю, что ошибка находится в этой функции - может быть, она как-то связана с асинхронностью?

Класс NameValidator:

import { FirebaseService } from './../services/firebase.service';
import { FormControl } from "@angular/forms";
import { Injectable } from '@angular/core';

@Injectable()
export class NameValidator {
  constructor(private firebaseService: FirebaseService) { }

  validate(control: FormControl): any {
    return this.firebaseService.queryByUniqueNameOnce(control.value).subscribe(res => {
        return res.length == 0 ? null : { emailTaken: true };
    });
  }
}

Функция запроса firebaseService:

queryByUniqueNameOnce(uniqueName: string) {
 return this.firestore.collection("users", ref => ref.where('uniqueName', '==', uniqueName))
 .valueChanges().pipe(take(1));
}

Группа форм:

 this.firstForm = this.fb.group({
  'uniqueName': ['', Validators.compose([Validators.required, this.nameValidator.validate.bind(this.nameValidator)])],
});

Answer 1

Асинхронные валидаторы должны быть третьими параметрами элемента формы.

Кроме того, compose становится бесполезным в новейших версиях.

'uniqueName': ['', [/*sync validators*/], [this.nameValidator.validate]]

Вам также придется изменить функцию проверки:

  validate(control: FormControl): any {
    return this.firebaseService.queryByUniqueNameOnce(control.value).pipe(
      map(res => !res.length ? null : ({ emailTaken: true }) )
    );
  }