Question

在下一个场景中，我很难让distinctUntilChanged工作。我做了一个异步验证器，它使用服务来检查用户是否存在给定的用户名。作为指令，此验证器绑定到输入。

class ValidateUniqueUsernameDirective implements AsyncValidator {
  constructor(private userService: UserService) {}

  validate(
    control: AbstractControl
  ): Promise<ValidationErrors> | Observable<ValidationErrors> {
    return control.valueChanges.pipe(
      debounceTime(1000),
      tap(value => {
        debugger;
        console.log(value);
      }),
      distinctUntilChanged(),
      switchMap(value => {
        return this.userService.getUserByUsername(value).pipe(
          map(user => {
            const usernameIsAvailable = user === undefined;
            return usernameIsAvailable
              ? null
              : { usernameAvailability: { value: control.value } };
          })
        );
      })
    );
  }
}

调用该服务会导致网络请求，因此我取消了验证，并且为了进一步减少验证，我尝试添加distinctUntilChanged，以便正如用户@Kld解释here一样，用户在将反跳时间返回恢复为先前的值不会触发新的请求。但是，事实并非如此。我不了解发生了什么，因为点击的值似乎是相同的。

我正在使用RxJS 6在Angular 6上。谢谢您的帮助！

Answer 1

保持简单：

class ValidateUniqueUsernameDirective implements AsyncValidator {

   private lastValue=null;
   private lastResult=null;
  constructor(private userService: UserService) {}

  validate(
    control: AbstractControl
  ): Promise<ValidationErrors> | Observable<ValidationErrors> {
      if(lastValue!==control.value){
        //do your validation and save result
      }else{
         // return last result or clear error state
      }
  }
}

您还可以添加超时，以在用户停止键入等后执行请求。

FormControl uniqueUntilChanged（）不起作用

1 个答案: