angular5 AsyncValidator不走常规路的实现方法

在Angluar 5版本中，异步验证器实现起来比较简单，但这里换一种思路，不用正规编写异步验证器，来实现异步验证的效果。

相信有基础经验的童鞋，直接看下面的代码，能够理解这种实现思路。

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/switchMap';  //注意，这里是Angular5版本中的导入方法，与Angular6不同

createUserDomainForm(dto: UserDomain): void {
  // 创建表单
  this.userDomainForm = this.fb.group({
    UserId: [dto.UserId, [Validators.required]],
    FactoryCode: [dto.FactoryCode, [Validators.required]],
    GroupCode: [dto.GroupCode, [Validators.required]],
    SupplierCode: [dto.SupplierCode, [Validators.required]],
  });

  // 通过监控控件值的变更，动态添加验证错误值参数，来达到异步验证的效果
  const inputField = this.userDomainForm.get('UserId');
  inputField.valueChanges.filter(val => val.length >= 4)
    .debounceTime(500)
    .switchMap(value => this.dataOperate.CheckUserExist(new UpdatePasswordDto(
      value, '', ''
    ))).subscribe((r: OpResult) => {
    if (!r.Success) {
      inputField.setErrors({userExist: true});
    }
  });
}

经过验证，效果很好，甚至比常规写法实现效果更好，这里加入了过滤，延迟，避免了频繁除非访问服务器带来的网络性能与

服务器IO性能。