我需要以角度编写反应形式类型的异步验证器。
我已经实现了低谷承诺。但是问题是验证器会在每次击键时触发服务器的每次击键。为实现防抖动功能,我已经为promise实现了setTimeout,但是我遇到的问题是在定义了特定的millisecon之后会触发它。
最终,我在实现所有debounceTime的承诺中实现了Observable,但是我在这里面临的问题是debounceTime发出了所有事件。
例如:如果我在输入字段中输入“ Prem”,则以下代码将在超时工作时触发服务器四次。

如果在实现异步验证器时遇到任何问题,请澄清一下。

//Latest code
static hasDuplicateEmail(formControl: FormControl) {
        return new Promise((resolve, reject) => {
            return new Observable(observer =>
               observer.next(formControl.value)).pipe(
                debounceTime(600),
                distinctUntilChanged(),
                switchMap((value) => {
                    //server side
                    return MotUtil.fetch('checkForRegisterEmail', {e: formControl.value});
                })
            ).subscribe((res) => {
                return (JSONUtil.isEmpty(res)) ? resolve(null) : resolve({duplicate: true});
            });
        });
    }


debounceTime应该如文档中所述工作。

最佳答案

您正在尝试以困难的方式进行处理。验证程序采用参数-AbstractControl。 AbstractControl具有-valueChanges属性,该属性返回formControl中的更改流。因此,在这里添加debouceTime并随后执行其他操作,最后将此流返回给FormControl:

hasDuplicateEmail(control: AbstractControl) {
  return control.valueChanges.pipe(
    debounceTime(600),
    switchMap(e =>
      this.http.get('checkForRegisterEmail', {e}).pipe(
        map((res: any) => JSONUtil.isEmpty(res) ? null : { duplicate: true })
      )
    )
  )
}


如您所见,我使用HttpClient,因为它是您在Angular中进行HTTP调用的方式(它设计用于工作流而不是Promises)

10-08 00:53