自定义验证器反应形式 Ionic

如何解决自定义验证器反应形式 Ionic

这是我第一次使用自定义验证器。我遵循了本指南 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
             }
                   
        });
}