问题描述
这是我第一次使用自定义验证器。我遵循了本指南 https://ionicthemes.com/tutorials/about/forms-and-validation-in-ionic 。基本上我想检查用户名是否已被使用,如果是,则更新配置文件按钮未启用。但它不起作用,如果我尝试在表单中输入已存在于 firebase 实时数据库中的用户名,按钮已启用,但在控制台中我收到消息“username già in uso”。我对 UsernameValidator 类做错了吗?
import { FormControl } from '@angular/forms';
import * as firebase from 'firebase';
export class UsernameValidator {
static validUsername(fc: FormControl){
firebase.database().ref().child("users").orderByChild("username")
.equalTo(fc.value)
.once("value",snapshot => {
if (snapshot.exists()){
console.log("username già in uso")
return ({validUsername: false});
}
else
return (null);
});
}
}
这是我定义表单组和验证器的地方:
constructor(private route: ActivatedRoute,private router: Router,public pfService: ProfileService,public fb: FormBuilder,public authService: AuthenticationService)
{
this.id = this.authService.userData.uid;
//Underscore and dot can't be next to each other (e.g user_.name).
//Underscore or dot can't be used multiple times in a row (e.g user__name / user..name).
this.validPattern = "^(?=.{6,20}$)(?!.*[_.]{2})[a-z0-9._]+$";
this.validPatternName = "^[a-z]{3,10}$";
this.userForm = fb.group({
txtUsername: ["",[Validators.required,Validators.pattern(this.validPattern),UsernameValidator.validUsername]],txtName: ["",Validators.pattern(this.validPatternName)]],});
};
这是 HTML 代码:
<form [formGroup]="userForm" (ngSubmit)="updateForm()" >
<ion-item>
<ion-label class="form-control" position="floating">Userame</ion-label>
<ion-input formControlName="txtUsername" type="text" ></ion-input>
<span [hidden]="userForm.controls.txtUsername.valid || userForm.controls.txtUsername.pristine">Lunghezza tra 6 e 20 caratteri</span>
</ion-item>
<ion-item>
<ion-label class="form-control" position="floating">Name</ion-label>
<ion-input formControlName="txtName" type="text" > </ion-input>
<span [hidden]="userForm.controls.txtName.valid || userForm.controls.txtName.pristine">Lunghezza tra 6 e 20 caratteri</span>
</ion-item>
<ion-row>
<ion-col>
<ion-button type="submit" *ngIf="userForm.controls.txtUsername.valid && userForm.controls.txtName.valid " color="primary" shape="full" expand="block">Update Profile</ion-button>
</ion-col>
</ion-row>
</form>
解决方法
首先,我建议您的验证器返回:
return ({validUsername: true});
如果您想在每次在输入中输入字符时检查验证器状态,我建议在表单声明之后添加构造函数:
this.userForm .valueChanges.subscribe(()=> {
console.log(this.userForm.getError('validUsername'))
})
另外,也许你的验证器不会返回任何东西,因为它会卡在快照中,你会知道你的 userForm.getError('validUsername') 是否仍然返回 null,即使你有“username già in uso”。
,由于您的 firebase 查询是异步函数,请尝试以下操作:
static validUsername(fc: FormControl){
firebase.database().ref().child("users").orderByChild("username")
.equalTo(fc.value)
.once("value",async snapshot => {
if (snapshot.exists()){
console.log("username già in uso")
return await ({validUsername: true});
}
else
return (null);
});
}
或
static validUsername(fc: FormControl){
let bool:boolean =this.getSnapshot(fc.value)
if(bool===true)
return ({validUsername: true});
}
else{
return (null);
}
});
}
async getSnapshot(value:string):boolean{
let bool:boolean
await firebase.database().ref().child("users").orderByChild("username")
.equalTo(fc.value)
.once("value",snapshot => {
if (snapshot.exists()){
bool=true
console.log("username già in uso")
}
else{
bool=false
}
});
}