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性能。

©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值