Question

这是我的AsyncValidator：

export class UniqueUriDirective implements AsyncValidator {
  myObservable: Observable<ValidationErrors>

  constructor() {}

  validate(control: AbstractControl): Observable<ValidationErrors> {

    if (!this.myObservable) {
      this.myObservable = new Observable<ValidationErrors>((observer) => {
        control.valueChanges
          .debounceTime(1000)
          .subscribe((value: string) => {
            console.log("Checking validation: " + value)
            observer.next({ "uriInUse": true })
            observer.complete()
          })
      })
    }

    return this.myObservable
  }

}

由于每次用户更改输入时都会调用validate()，因此我将返回一个重用的Observable单个实例。

验证器的工作原理是控件被标记为无效。但问题是debounceTime()导致最后输入的值被多次触发（每次击键一次）。这种做法违背了使用debounceTime()的目的。

我尝试了这种替代方法：

validate(control: AbstractControl): Observable<ValidationErrors> {

  if (!this.myObservable) {
    this.myObservable = control.valueChanges
        .debounceTime(1000)
        .map(value => {
          console.log("Firing: " + value)
          return { "uriInUse": true }
        })
  }

  return this.myObservable
}

这会导致debounceTime()正常工作，并且订阅处理程序仅在一秒钟内被调用一次。但是这并没有将控制标记为无效。

如何正确使用debounceTime()以避免每次按键都运行验证逻辑？

AsyncValidator和debounceTime不能正常工作

0 个答案: