角度 5 |检查 Cloud Firestore 中是否存在字段

Angular 5 | Check if a field exists in a Cloud Firestore

提问人:DCMATE 提问时间:1/20/2018 最后编辑:Dan McGrathDCMATE 更新时间:6/10/2019 访问量:1193

问:

我目前正在做一个大项目,为此,我需要使用 Firebase 和 Angular 5,但我在表单验证方面遇到了一些障碍。

我想创建一个自定义验证程序来检查用户输入的电子邮件是否已被使用。

为此,我在自定义验证器中放置了一个函数,当电子邮件已被使用时会显示错误,但是当我们输入未使用的地址时,就会出现问题。

当我使用已使用的地址验证表单时,表单会返回我的状态:“无效”,这很正常,这就是我要找的,但是当我使用不在 Firestore 中的电子邮件进行验证时,它会返回一个错误,告诉我表单处于“待处理”状态,也就是说它等待......但是等什么?

我的工作

我在模板中创建我的 formControl

// inscription.component.html
<mat-step [stepControl]="form">
  <form [formGroup]="form">
    <mat-form-field>
       <input matInput formControlName="email" 
       placeholder="Ton adresse email" required>
       <mat-error *ngIf="email.invalid">
         {{ getErrorMessage(email, 'adresse email', 3, 25) }}
       </mat-error>
    </mat-form-field>
  </form>
</mat-step>

我的函数getErrorMessage()

// inscription.component.html
getErrorMessage(selector: any, element: string, minCharacters: number, maxCharacters: number) {
     return selector.hasError('required') ? 'Tu dois entrer ton ' + element :
            selector.hasError('notunique') ? 'Cette ' + element + ' est déjà utilisée' :
            '';
}

我初始化了创建表单所需的一切:

// inscription.component.ts
form: FormGroup;
email = new FormControl('', [
   Validators.required,
   Validators.email,
   Validators.minLength(3),
   Validators.maxLength(25)
   // Fonction pour la vérif de l'email
], this.checkIfEmailExistsInDatabase.bind(this));

然后我在表单中初始化 formControl “email”

// inscription.component.ts
ngOnInit() {
   this.form = new FormGroup({
      email: this.email,
   });
}

最后......“bug”从何而来:

// inscription.component.ts
    checkIfEmailExistsInDatabase(control: AbstractControl) {
        return new Promise(resolve => {
            // We check that there is no document with the same name of what is in the formControl
            firebase.firestore().collection('items').where('email', '==', control.value).get()
                .then(snapshot => {
                    snapshot.forEach(doc => {
                        if (!doc.exists) {
                            console.log('Email doesn\'t exists');
                            resolve(null);
                            // ERROR: Validation status remains in "PENDING"                                // While he must normally proceed to the next step
                        } else {
                            console.log('Email exists already');
                            resolve({ 'notunique' : true });
                            // An error message is displayed well and blocks validation                            }
                    })
                });
        });
    }

我承认我真的不明白为什么我不明白我在哪里可以得到这个错误,如果它是一个错误,以及如何修复它..:?

对不起,我的英语不好,我是法国人。

如果您有想法,请随时回答,提前谢谢!

JavaScript Angular 表单 验证 google-cloud-firestore

评论


答: 暂无答案