如何使用可观察到的RxJS消除Angular 4中的异步验证器? [英] How to debounce async validator in Angular 4 with RxJS observable?

问题描述

我正在使用具有Angular 4反应形式的自定义异步验证器，以通过调用后端检查电子邮件地址是否已被占用.

I'm using custom async validator with Angular 4 reactive forms to check if E-Mail address is already taken by calling a backend.

但是，Angular调用验证器，该验证器向服务器请求每个输入的字符.这会对服务器造成不必要的压力.

However, Angular calls the validator, which makes request to the server for every entered character. This creates an unnecessary stress on the server.

是否可以使用可观察到的RxJS优雅地消除异步调用的振动?

Is it possible to elegantly debounce async calls using RxJS observable?

import {Observable} from 'rxjs/Observable';

import {AbstractControl, ValidationErrors} from '@angular/forms';
import {Injectable} from '@angular/core';

import {UsersRepository} from '../repositories/users.repository';


@Injectable()
export class DuplicateEmailValidator {

  constructor (private usersRepository: UsersRepository) {
  }

  validate (control: AbstractControl): Observable<ValidationErrors> {
    const email = control.value;
    return this.usersRepository
      .emailExists(email)
      .map(result => (result ? { duplicateEmail: true } : null))
    ;
  }

}

推荐答案

@Slava的答案正确.使用Observable会更容易:

While @Slava's answer is right. It is easier with Observable :

return (control: AbstractControl): Observable<ValidationErrors> => {
      return Observable.timer(this.debounceTime).switchMap(()=>{
        return this.usersRepository
            .emailExists(control.value)
            .map(result => (result ? { duplicateEmail: true } : null));
      });
}

注意:

• Angular将自动取消订阅返回的Observable
• timer()仅带有一个参数
>
• 因为timer仅发出一个值，所以无论我们使用switchMap还是flatMap
• 如果服务器调用失败，您应该考虑使用 catchError
• 角度文档:异步验证

• Angular will automatically unsubscribe the returned Observable
• timer() with one argument will only emit one item
• since timer emits only one value it does not matter if we use switchMap or flatMap
• you should consider to use catchError in case that the server call fails
• angular docs: async-validation

这篇关于如何使用可观察到的RxJS消除Angular 4中的异步验证器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！