时间戳

首页 > 解决方案 > 自定义验证器反应形式离子

ionic-framework - 自定义验证器反应形式离子

问题描述

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

标签： ionic-frameworkcustomvalidator

解决方案

首先，我建议您的验证器返回：

 return ({validUsername: true});

如果您想在每次输入字符时检查验证器状态，我建议您在表单声明之后添加构造函数：

 this.userForm .valueChanges.subscribe(()=> {
console.log(this.userForm.getError('validUsername'))
})

此外，也许你的验证器不会返回任何东西，因为它会卡在快照中，你会知道你的 userForm.getError('validUsername') 是否仍然返回 null，即使你有“username già in uso”。

推荐阅读