angular - Angular AsyncValidatorFn 仅适用于模糊而不适用于按键事件
问题描述
我正在使用最新的 Angular 版本之一,我正在尝试创建自定义验证来验证 RestAPI 的代码,下面的示例工作正常,但它不适用于 keypress 事件,它仅适用于 onblur 事件。“代码不可用”文本仅在输入字段失去焦点时出现。你有什么主意吗?
在此先感谢您的帮助!
这是表单生成器
this.form = this.formBuilder.group({
code: ['',
[Validators.required, Validators.pattern('^[A-Za-z0-9]{4}')],
this.asyncCodeValidator.validate(),
]
});
这是 asyncCodeValidator 服务
@Injectable({ providedIn: 'root' })
export class AsyncCodeValidatorService {
constructor(private codeService: CampaignService) {}
validate(): AsyncValidatorFn {
return (control: AbstractControl): Observable<ValidationErrors | null> => {
return this.searchCode(control.value).pipe(
map(result => {
return result.available ? null : { notUnique: 'Action code not unique' };
})
);
};
}
searcCode(code: string): Observable<CodeValidate> {
return timer(500).pipe(
switchMap(() => {
return this.codeService.validateCode(code); // return Observable<CodeValidate>
})
);
}
}
这是html控件
<form [formGroup]="form">
<input type="text" formControlName="code">
<p style="color: red" *ngIf="form.get('code').errors?.notUnique">code not available</p>
</form>
使用
"@angular/common": "11.2.12",
"@angular/compiler": "11.2.12",
"@angular/core": "11.2.12",
"@angular/forms": "11.2.12",
"@angular/material": "11.2.12",
解决方案
我找到了解决方案,错误出现在组件的 changeStrategy.OnPush 上
推荐阅读
- swift - 如何在快速在 textFieldDidBeginEditing 委托上呈现另一个视图控制器时隐藏键盘?
- android-studio - Gradle 同步失败:com.android.tools.idea.gradle.project.sync.idea.issues.SdkPlatformNotFoundException:模块:找不到“app”平台“android-29”
- python - 用于匹配各种形式的字符串的正则表达式
- flutter - 如何开始 WhatsApp 对话?[扑]
- r - 着色 DT 列
- asp.net-core - 使用多个参数调用 Web API
- xamarin - 无法在 xamarin 表单中保持标签栏可访问时导航页面
- java - 哪些 KeyStore 实现可用于存储对称密钥?
- python-3.x - 使用 Tkinter 将多个项目居中并放在同一行
- c - 即使在启用缓冲后 printf 也不会打印