Проверка уникального имени Angular Firestore (реактивные формы)

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

Вот register.component.ts

this.form = this.fb.group({
    firstName: new FormControl('',[
      Validators.required,
      Validators.minLength(3)
    ]),
    lastName: new FormControl('',[
      Validators.required,
      Validators.minLength(3)
    ]),
    email: new FormControl('',[
      Validators.required,
      Validators.email,
      CustomValidators.shouldBeUnique(this.afs)
    ])
});

А вот метод Custom Validator ShouldBeUnique (afs).

static shouldBeUnique(afs: AngularFirestore): ValidationErrors | null{
    let emailExists: boolean;
    return (control: AbstractControl) => {
        let emailVal = ''
        let email = control.get('email').value;

        let collref = afs.collection('users').ref;
        let queryref = collref.where('email', '==', email);

        queryref.get().then((snapShot) => {
        if (snapShot.empty) {
            // this.status = 'valid';
            console.log('Email is avalible.');
            return null;
        }
        else {
            console.log('Email is already registered.');
                return { shouldBeUnique: true };
            }
        });
    }
  }

Код работает нормально и возвращает null, если электронной почты нет в БД. Но проблема с кодом заключается в том, что когда электронная почта существует в БД, она только печатает сообщение в консоли и не возвращает {shouldBeUnique: true};.
Любая помощь будет принята с благодарностью.


google-cloud-firestore angular angular-validation
person Musaddiq Khan    schedule 17.10.2018    source источник
comment
@frisinacho Я не знаю, что вы изменили в этом вопросе, но я принял одобрение. Не могли бы вы упомянуть об изменениях?   -  person Musaddiq Khan    schedule 17.10.2018
comment
Привет @Musaddiq, я только что отредактировал синтаксис, чтобы дать более четкое представление о коде (цвета и выделение)   -  person frisinacho    schedule 17.10.2018

Ответы (1)


arrow_upward
2
arrow_downward

Ваша проблема здесь:

queryref.get().then((snapShot) => {
    if (snapShot.empty) {
        // this.status = 'valid';
        console.log('Email is avalible.');
        return null;
    }
    else {
        console.log('Email is already registered.');
            return { shouldBeUnique: true };
        }
    });

Вы пытаетесь использовать return внутри функции then, но это асинхронное выполнение, и ваш код не будет ждать его завершения. Вот почему console.log работает, а оператор возврата - нет.

Я предлагаю вам использовать подход async / await, чтобы уменьшить сложность, и дайте мне знать, могу ли я вам чем-нибудь помочь.

person AntonioGarcía    schedule 17.10.2018
comment
Спасибо за обновления. Я пытаюсь использовать async await, как показано ниже: await queryref.get().then(), но безуспешно. Вы можете указать, где мне следует использовать ключевое слово await? Или, если вы дадите мне полный метод с использованием await, это будет здорово. - person Musaddiq Khan; 17.10.2018
comment
Я нашел похожий случай в SO здесь. Это простое использование await ref.get(), помните, что функция, содержащая вызов await, должна быть помечена как async. - person AntonioGarcía; 17.10.2018
comment
Я перешел по этой ссылке, но проблема та же. Фактически после записи полного существующего адреса электронной почты он печатается только в консоли. Но когда я нажимаю пробел после этого, он печатается в консоли и также возвращает сообщение. - person Musaddiq Khan; 19.10.2018