大佬教程收集整理的这篇文章主要介绍了返回 Promise 或 Observable 的验证器：自定义异步验证器：Angular 8，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在尝试为我的注册表单创建自定义异步验证器，用于检查电子邮件是否为有效电子邮件或未使用第三方 API。这是 API 网站的参考链接 -
https://www.zerobounce.net/email-validation-api.html
我正在尝试使用 RxJs debounCETime、disTinctUntilChanged 来实现它。在表单控件中，我还有两个需要验证和模式。但我总是收到此错误 - 错误：预期验证器返回 Promise 或 Observable。
我搜索了几个示例，但没有任何效果。提前致谢。
验证器 -
return dismissible(
direction: dismissDirection.down,ondismissed: (_) => Navigator.pop(context),child: Scaffold(
body: Container(),),);
注册组件 -
export class UniqueEmailValIDator{
static createValIDator(_AJAXservice : AJAXservicE){
return (control : AbstractControl) =>{
const APIKey = environment.emailValIDatationKey;
const baseUrl = 'https://API.zerobounce.net/v2/valIDate?';
if(control.valID){
return control
.valueChanges
.pipe(
debounCETime(800),disTinctUntilChanged(),switchMap((email : String) => _AJAXservice.APICall('',`${BaseUrl}API_key=${APIKey}&email=${email}&ip_address=''`,'GET',truE)),map(res => res.Json()),map((valIDationStatus : any) => {
if (
valIDationStatus.status == "valID" &&
valIDationStatus.mx_found == "true"
) {
return null
} else {
return { isEmailinvalID : true }
}
})
)
}
}
}
}
为什么要从 valueChanges Observable 管道验证器 Observable？这没有多大意义，因为验证器在 valueChange 上运行并且在它脏的时候运行。并且您还仅在控件有效时返回所需的 Observable。因此，当同步验证器将控件标记为 Invalid 时，此控件不会返回 Observable。我想这就是导致错误的原因。
试试这个方法：
export class UniqueEmailValidator {
static createValidator(_ajaxservice: AjaxservicE) {
return (control: AbstractControl) => {
const apiKey = environment.emailValidatationKey;
const baseUrl = 'https://api.zerobounce.net/v2/validate?';
return timer(800).pipe(
concatMap((email: String) =>
_ajaxservice.apiCall('',`${BaseUrl}api_key=${apiKey}&email=${email}&ip_address=''`,'GET',truE)
),map(res => res.json()),map((validationStatus: any) => {
if (validationStatus.status == 'valid' && validationStatus.mx_found == 'true') {
return null;
} else {
return { isEmailInvalid: true };
}
})
);
};
}
}}
我在一个项目中使用与此类似的方法，我必须检查文件系统上的导出路径。我不太确定的一件事是disTinctUntilChanged。不是已经过滤了吗
,这就是我的结果，解决了我的问题 -
验证器 -
export class UniqueEmailValidator {
static createValidator(_ajaxservice: AjaxservicE) {
let validatorSubject$ = new Subject();
let debouncedSubject$ = new Subject<String>();
debouncedSubject$
.pipe(debounCETime(500),disTinctUntilChanged())
.subscribe((email: String) => {
const apiKey = environment.emailValidatationKey;
const baseUrl = 'https://api.zerobounce.net/v2/validate?';
_ajaxservice.apiCall('',truE).subscribe({
next: (validationData : IEmailValidation) => {
if (
validationData.status == "valid" &&
validationData.mx_found == "true" &&
(
validationData.sub_status == "alias_address" ||
validationData.sub_status == ""
)
) {
return null
} else {
return { isEmailInvalid : true }
}
},error: (validationFailed) => {
console.log(
"Failed to validate the Email Address",validationFailed
);
},});
});
return (
control: AbstractControl
):
| Promise<ValidationErrors | null>
| Observable<ValidationErrors | null> => {
debouncedSubject$.next(control.value);
let promise = new Promise<any>((resolve,reject) => {
validatorSubject$.subscribe((result) => resolve(result));
});
return promise;
};
}
}
组件 TS -
this.registration = this._formBuilder.group({
firstName: new FormControl('',[
Validators.required,Validators.pattern('^[a-z A-Z]+$')
]),lastName: new FormControl('',email: new FormControl('',Validators.pattern('[A-Za-z0-9._%-]+@[A-Za-z0-9._%-]+\\.[a-z]{2,3}')
],UniqueEmailValidator.createValidator(this._ajaxservicE))
})
组件 HTML -
<div *ngIf="formcontrol.email.errors.isEmailInvalid">
<p>Use a working E-mail address.</p>
</div>
以上是大佬教程为你收集整理的返回 Promise 或 Observable 的验证器：自定义异步验证器：Angular 8全部内容，希望文章能够帮你解决返回 Promise 或 Observable 的验证器：自定义异步验证器：Angular 8所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。