javascript - 如何在异步验证器中使用 debounceTime() 和 distinctUntilChanged()

问题描述

我想在我的异步验证器中添加debounceTime和。distinctUntilChanged

mockAsyncValidator(): AsyncValidatorFn {
    return (control: FormControl): Observable<ValidationErrors | null> => {
      return control.valueChanges.pipe(
        debounceTime(500),
        distinctUntilChanged(),
        switchMap(value => {
          console.log(value);  // log works here
          return this.mockService.checkValue(value).pipe(response => {
            console.log(response);  // log did not work here
            if (response) {
              return { invalid: true };
            }
            return null;
          })
        })
      );
  }

上面的代码不起作用，表单状态变为PENDING.
但是当我timer在这个答案中使用时，代码可以工作，但我不能使用distinctUntilChanged。

return timer(500).pipe(
    switchMap(() => {
      return this.mockService.checkValue(control.value).pipe(response => {
        console.log(response);  // log works here
        if (response) {
          return { invalid: true };
        }
        return null;
      })
    })
  );

我试着用BehaviorSubject喜欢

debouncedSubject = new BehaviorSubject<string>('');

并在中使用它AsyncValidatorFn，但仍然无法正常工作，如下所示：

this.debouncedSubject.next(control.value);
return this.debouncedSubject.pipe(
  debounceTime(500),
  distinctUntilChanged(), // did not work
                          // I think maybe it's because of I next() the value
                          // immediately above
                          // but I don't know how to fix this
  take(1), // have to add this, otherwise, the form is PENDING forever
           // and this take(1) cannot add before debounceTime()
           // otherwise debounceTime() won't work
  switchMap(value => {
    console.log(value); // log works here
    return this.mockService.checkValue(control.value).pipe(response => {
        console.log(response);  // log works here
        if (response) {
          return { invalid: true };
        }
        return null;
      }
    );
  })
);

标签： javascriptangulartypescriptangular-forms

解决方案

问题是每次在validatorFnpipe()内部调用validatorFn 时都会构建一个新管道。之前的值不会被捕获以使 discinct 或 debounce 起作用。您可以做的是在BehaviourSubjects外部设置两个，termDebouncer就validationEmitter我而言。

您可以设置工厂方法来创建此验证器，从而重用它。您还可以使用 DI 设置扩展AsyncValidator和创建一个类。我将在下面展示工厂方法。

export function AsyncValidatorFactory(mockService: MockService) { 
  const termDebouncer = new BehaviorSubject('');
  const validationEmitter = new BehaviorSubject<T>(null);
  let prevTerm = '';
  let prevValidity = null;

  termDebouncer.pipe(
        map(val => (val + '').trim()),
        filter(val => val.length > 0),
        debounceTime(500),
        mergeMap(term => { const obs = term === prevTerm ? of(prevValidity) : mockService.checkValue(term);
          prevTerm = term; 
          return obs; }),
        map(respose => { invalid: true } : null),
        tap(validity => prevValidity = validity)
    ).subscribe(validity => validationEmitter.next(validity))


  return (control: AbstractControl) => {
    termDebouncer.next(control.value)
    return validationEmitter.asObservable().pipe(take(2))
  }
}

编辑：此代码摘录来自 Angular 表单验证以外的用例，（准确地说是 React 搜索小部件。）管道运算符可能需要更改以适合您的用例。

Edit2：take(1)或first()确保可观察对象在发出验证消息后完成。asObservable()将确保在下一次调用时生成一个新的 observable。您也可以跳过asObservable()，就像pipe()管道运算符分支异步管道并从那里开始创建一个新的 observable 一样。您可能必须使用take(2)来克服 behaviorSubject 是有状态并持有值的事实。

Edit3：使用合并映射来处理distinctUntilChanged()会导致 observable 不发射和不完整的事实。

javascript - 如何在异步验证器中使用 debounceTime() 和 distinctUntilChanged()

问题描述

解决方案

推荐阅读