Question

这是我的反应式表单验证代码

userName: new FormControl('',[Validators.required,Validators.maxLength(50),this.checkIfUsernameExists.bind(this)])

}）;

这是我在同一个文件中编写的验证功能

checkIfUsernameExists(control){
var that = this;
return new Promise(resolve => {
    setTimeout(() => {
        that.dashdata.checkUsernameExists(control.value).subscribe(ret=>{
        if(ret!="0"){ 
            resolve({'emailvalid': true});
        }else{
            resolve(null);
        }`enter code here`
        });
    }, 1000);        
});
}

html代码就像

              <input type="text" id="username-input"  class="form-control" placeholder="Enter username"  autocomplete="email" formControlName="userName" [ngClass]="{ 'is-invalid': submitted && formfields.userName.errors }">
              <span class="invalid-feedback" *ngIf="formfields.userName.errors.emailvalid">This username already exists</span>
              <span class="invalid-feedback" *ngIf="formfields.userName.errors.required">Please enter a username</span>

Answer 1

您需要创建一个异步验证器来检查并在FormControl字段上应用验证。下面是虚拟代码，可以帮助您开发自己的

创建另一个文件user.validator.ts

export class ValidateUsername {
  static createValidator(service: userService) {
    return (control: AbstractControl): Observable<ValidationErrors | null> => {
      if (!control.valueChanges || control.pristine) {
        return of(null);
      } else {
        return control.valueChanges.pipe(
          debounceTime(300),
          distinctUntilChanged(),
          take(1),
          switchMapTo(service.checkUsernameExists(control.value)),
          tap(() => control.markAsTouched()),
          map((data) => (data.exist ? { userExist: true } : null))
        );
      }
    };
  }
}

并以这种方式以反应形式使用

userName: [
                '',
                [Validators.required, Validators.maxLength(50)],
                ValidateUsername.createValidator(this.userService)
            ],

和HTML

<div *ngIf="username.touched && username.errors">
    <span *ngIf="formName.controls['userName']?.errors?.required">Please enter email address.</span>
    <span *ngIf="formName.controls['userName']?.errors?.pattern">Maximum
                                    {{formName.controls['userName']?.errors?.maxlength.requiredLength}} characters are
                                    allowed.</span>
    <span *ngIf="inviteForm.controls['userName']?.errors?.userExist">User already exists. </span>
    </div>
<div *ngIf="user.status === 'PENDING'">
    <span class="text-info">Checking...</span>
</div>

我在通过api检查我的angular 6应用程序中是否存在用户名时遇到问题

1 个答案: