我目前正在开发一个大型项目,为此我需要使用Firebase和Angular 5,但我阻止了一些关于表单验证的问题.我解释一下,我想创建一个自定义验证器来检查用户输入的电子邮件是否已被使用.为此,我在自定义验证器中放置了一个函数,当电子邮件已经被使用时会显示错误,但是当我们输入未使用的地址时会出现问题.
当我使用已经使用过的地址验证表单时,表单会返回状态:"INVALID",这很正常,这就是我要查找的内容,但是当我使用不在Firestore中的电子邮件进行验证时,它会返回错误告诉我表单处于"PENDING"状态,也就是说等待......但是等待什么?
我所做的
我在模板中创建了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>
Run Code Online (Sandbox Code Playgroud)
我的函数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' :
'';
}
Run Code Online (Sandbox Code Playgroud)
我初始化创建表单所需的一切:
// inscription.component.ts
form: FormGroup;
email = new FormControl('', [
Validators.required, …Run Code Online (Sandbox Code Playgroud)