- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经创建了一个自定义异步验证器,它使用一项服务来根据服务器验证电子邮件。然而,这意味着每次输入一个字符时服务器都会被命中,这是不好的。我在这里遵循了几个我无法开始工作的答案。
我的验证器:
import {FormControl, NG_ASYNC_VALIDATORS, Validator} from
'@angular/forms';
import { Http } from '@angular/http';
import {Directive, forwardRef} from "@angular/core";
import {ValidateEmailService} from "../services/validate-email.service";
import {UserService} from "../services/user.service";
@Directive({
selector: '[appEmailValidator]',
providers: [
{ provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => EmailValidator), multi: true }
]
})
export class EmailValidator implements Validator {
public validateEmailService: ValidateEmailService;
constructor(
private _http: Http,
private _userService: UserService
) {
this.validateEmailService = new ValidateEmailService(this._http, this._userService);
}
validate(c: FormControl) {
return new Promise(resolve => {
this.validateEmailService.validateEmail(c.value)
.subscribe((res) => {
console.log(res);
if (res.valid) {
resolve(null);
} else {
resolve({
valid: {
valid: false
}
});
}
});
})
}
}
它本身运行良好,但一旦我尝试向它添加某种形式的去抖动,我最终会破坏它。
我试过来自 this question 的答案我得到了类似 Type X is not assignable to type 'Observable<any>'
的错误等等
我通过使用 setTimeout
接近了但最终所做的只是停止该功能。
我的最终目标是仅在大约 600 毫秒内未更改输入时运行验证器,但满足于每 600-2000 毫秒仅验证一次。
为了更加清楚,validateEmail
来自 ValidateEmailService
的方法:
public validateEmail(email: string) {
let validateEmail = new ValidateEmail(email);
return this._http.get(
this.getUrl(validateEmail),
this.getOptionArgs())
.map((response: Response) => Object.assign(new UserEmailVerification(), response.json().UserEmailVerification));
}
最佳答案
我还没有看到异步验证器作为指令实现,而是作为分配给表单控件的验证器函数实现的。
这是我在类似情况下使用的示例验证器:
import { Injectable } from '@angular/core';
import { AbstractControl, AsyncValidatorFn } from '@angular/forms';
import { Observable, timer, of } from 'rxjs';
import { switchMap, map } from 'rxjs/operators';
import { MembershipsService } from '@app/memberships/memberships.service';
@Injectable()
export class MembershipsValidators {
constructor (
private membershipsService: MembershipsService,
) {}
checkMembershipExists(email?: string): AsyncValidatorFn {
return (control: AbstractControl): Observable<{ [key: string]: any } | null> => {
if (control.value === null || control.value.length === 0) {
return of(null);
}
else if (email && email === control.value) {
return of(null);
}
else {
return timer(500).pipe(
switchMap(() => {
return this.membershipsService.lookupMember(control.value).pipe(
map(member => {
if (!member) {
return { noMembership: { value: control.value } };
}
return null;
})
);
})
);
}
};
}
}
它被导入并应用到表单控件中:
this.form = this.formBuilder.group({
memberEmail: new FormControl('', {
validators: [ Validators.required, Validators.pattern(regexPatterns.email) ],
asyncValidators: [ this.membershipsValidators.checkMembershipExists() ],
}),
});
这样,在同步验证器得到满足之前,异步验证器不会触发。
关于Angular 5 Debounce 自定义异步验证器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52782674/
我有两个可观察对象: Observable O(open): 包含一些内容的文件在 textview 中打开 Observable E(edit):在textview中编辑的文件内容 我想去抖动 E
当我尝试使用 JavaScript 的“debounce” 时,如下所示, debounce(() => { this.getDataFn(true); }, 3000); 收到诸如debou
我有 2 个微服务在 Azure 上的 Kubernetes 集群中运行。当项目更新时,“项目”微服务会向 Kafka 发送一个事件。 “分析”微服务使用该事件,进行一些昂贵的计算,最后发送包含结果的
在我的应用程序中,我有一个返回这样的可观察对象的服务: public genericService(params) { //Do some stuff //... return
背景 假设您有一个应用程序,当您发出请求时,您会收到大量信息。在我关于餐馆的应用程序中,我想在每次收到包含几家餐馆的请求时计算所有菜单的平均价格: var avg = menus => { con
这个问题在这里已经有了答案: Write async function with Lodash in a Vuejs component (2 个答案) 关闭 4 年前。 如何在 async 函数上
有什么方法可以检查去抖功能是否处于挂起状态? 通过使用源码分析,我发现只有两种方法:flush和 cancel . 最佳答案 更新 1 debounce的pending方法只能在 master 上访问
我正在尝试通过 React 中的输入更改来消除发送 Redux Action 的抖动。 const debouncedSubmit = debounce(() => dispatch(new Task
我试图在调整窗口大小时触发一个事件,它似乎不起作用。 $(window).resize(function(){ _.debounce(function(){ console.log
我想我发现了与 Swift Combine 的去抖操作符相关的内存泄漏。这要么是泄漏,要么我做错了什么。这是一个重现问题的简单示例: @IBOutlet weak var currentVal
我正在使用此代码: function resizeJquerySteps() { $('.wizard .content').animate({ height: $('.bod
我正在使用 React 和 mobx 开发一些东西。 我创建了一个 ImageCarousel 组件,在其中显示单击的图像。我有一个上一个和一个下一个按钮(它们本身就是一个组件),用于在图像之间移动。
我正在尝试debounce a function using Lodash ,当它调用该函数时,它似乎根本没有消除它。我的问题似乎与我在其他地方看到的错误不同on SO或 Google(通常,他们不会
我正在使用 Ben Alman 的 Throttle-debounce 插件。 当我这样调用 .throttle 时: $(window).scroll($.throttle(250, functio
我已经创建了一个自定义异步验证器,它使用一项服务来根据服务器验证电子邮件。然而,这意味着每次输入一个字符时服务器都会被命中,这是不好的。我在这里遵循了几个我无法开始工作的答案。 我的验证器: impo
我正在处理用于过滤一组数据的多个复选框。但是,我不希望复选框在每次单击复选框后触发过滤器,因此我想对其进行去抖处理。在选择最后一个复选框后,可能要等待 500 毫秒到一秒。 查看我的plnkr
这是我的代码( Angular 2): GO! debouncedFunc = _.debounce(()=>{ console.log('bam') }, 1000, {"leading
我已经创建了一个自定义异步验证器,它使用一项服务来根据服务器验证电子邮件。然而,这意味着每次输入一个字符时服务器都会被命中,这是不好的。我在这里遵循了几个我无法开始工作的答案。 我的验证器: impo
我正在尝试使用函数 _.debounce()的underscore.js但我不能正确地做到这一点。 我正在尝试消除窗口滚动的抖动,如下所示,但我很困惑。 $(document).ready(funct
当我运行此代码时,我在控制台中看不到任何控制台日志。 debounce 方法(取自 here )根本不执行该方法吗? function debounce(func, wait, immediate)
我是一名优秀的程序员,十分优秀!