javascript - Angular中唯一的用户名验证,数据返回服务的可观察类型
问题描述
// 注册页面.ts
this.registerationForm = new FormGroup(
{
username: new FormControl(null,
[
Validators.required,
Validators.minLength(3),
Validators.maxLength(30),
Validators.pattern('^[a-zA-Z-0123456789]*$'),
]
),
// accountService.ts
validateUsername(username: string): Observable<any> {
return this.httpManager.post(authServer + "username-validator", new ValidateUsernameRequest(username)).pipe(
map(
(response: Response) => {
return response.data;
}
)
);
}
// 注册页面.html
<ion-item [ngClass]="username==null ? 'at-beginning':''">
<ion-label position="floating">Kullanıcı Adı</ion-label>
<ion-input name="username" formControlName="username" inputmode="text" class="ion-text-lowercase"
placeholder="Kullanıcı Adı" (onchange)=(checkUsername($event)) (keypress)=(onKeyUp($event)) (keydown.space)="$event.preventDefault()">
</ion-input>
</ion-item>
<div class="err" *ngIf="formControls.username.errors">
<div *ngIf="formControls.username.errors.required">Kullanıcı adı zorunlu.</div>
<div *ngIf="formControls.username.errors.minlength">Kullanıcı adınız çok kısa.</div>
<div *ngIf="formControls.username.errors.maxlength">Kullanıcı adınız çok uzun.</div>
<div *ngIf="formControls.username.errors.pattern">Kullanıcı adınız özel karakter içeremez.</div>
<div *ngIf="formControls.username.errors.checkUsername">Kullanıcı adınız alınmış.</div>
</div>
我试图为用户名编写一个验证器,只要用户对输入进行更改,它就会检查其可用性。我已经为它奋斗了两天,但我只是卡住了。我知道我需要使用订阅数据的异步函数,accountService.validateUseranem(control.value)
但不知何故我未能使其工作。
有人可以帮我吗?
解决方案
我做了以下并解决了我自己的问题。
创建了 username-validator.directive.ts
import { AbstractControl, AsyncValidatorFn, ValidationErrors } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
import { AccountService } from 'src/app/services/yon/auth/account.service';
export function existingUsernameValidator(userService: AccountService): AsyncValidatorFn {
return (control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => {
return userService.validateUsername(control.value).pipe(map(
(data) => {
console.log("The result is : " + data)
return (!data) ? { "usernameExists": true } : null;
}
));
};
}
然后在用户名的验证器中使用它
this.registerationForm = new FormGroup(
{
username: new FormControl(null, {
validators: [
Validators.required,
Validators.minLength(3),
Validators.maxLength(20),
],
asyncValidators: [existingUsernameValidator(this.accountService)],
updateOn: 'change'
}),
email: new FormControl(null, {
validators: [
Validators.required,
Validators.email],
asyncValidators: [existingEmailValidator(this.accountService)],
updateOn: 'change'
}),
像这样
还;
updateOn: 'change' 了解该控件上的输入是否更改,并且每当输入更改时,它都会检查值以进行验证。
因为我需要向 API 发送请求并使用该值作为响应返回,所以我的验证器需要是一个异步验证器。据我所知,同步和aysnc验证器也需要分开,就像我做的那样。
推荐阅读
- php - 试图仅在我的网站中获取非对象的属性“id”
- spring-boot - 除了 WebFlux 上下文之外,Spring-Boot 是否处理 Kotlin 协程?
- azure-devops - Azure DevOps 中的并发/并行构建
- javascript - 模拟按 Enter 键提交(无 jquery)
- aws-amplify - 如何防止 AmplifyJS 始终不从公用文件夹中获取对象?
- angular - TypeScript:构造函数参数列表中的赋值运算符?
- oracle - 如何使用codeigniter制作pdf?
- teamcity - 从 TeamCity 构建步骤开始后台进程
- python - 如何将列表转换为字典 python;字典的键可能有多个值吗?
- ios - 更新到 ARC Obj-c 后声音不播放