angular异步验证防抖踩坑实录

 更新时间:2019-12-02 07:03:50   作者:佚名   我要评论(0)

前言
本周的一个需求是在一个异步验证上加上防抖,防抖,以前也接触过,依稀记得不难,就没再去看angluar的官方文档,直接就开始google写了,然后……一不小心就掉坑

前言

本周的一个需求是在一个异步验证上加上防抖,防抖,以前也接触过,依稀记得不难,就没再去看angluar的官方文档,直接就开始google写了,然后……一不小心就掉坑里了。

突然没了效果的验证功能

在网上一番查询以后,选了一个最简单,最符合的实现

一番修改以后我的代码成了下面这样

 public oldPasswordValidator(): AsyncValidatorFn {
  return (ctrl: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => {
  rerutn ctrl.valueChanges.pipe(
    debounceTime(2000),
    distinctUntilChanged(),
    switchMap(value => this.checkPasswordIsRight(value)),
    map((isRight: boolean) => (isRight ? null : {passwordError: true})),
    catchError(() => null));
  };

但是验证器并没有效果,在c层获取到的始终是null,而在方法中打印结果,却可以发现,能够产生正确的结果

但是获取到的相关错误一直是没有,更让我感到惊讶的是表单的valid和invalid竟然同时处在了false,他们不是应该互斥吗?不是反义词吗?

FormControl的status

首先还是解决valid与invalid的疑惑吧,查询官方文档。

FormControl的status继承自AbstractControl

AbstractControl是 FormControl、FormGroup 和 FormArray 的基类。它提供了一些所有控件和控件组共有的行为,比如运行验证器、计算状态和重置状态。 它还定义了一些所有子类共享的属性,如 value、valid 和 dirty。不允许直接实例化它。

找到valid

至此,这个疑问解决了,互斥的并不仅仅是valid和invalid,

还有一个检查进行状态:pending和禁止disable,验证一下,果然此时的状态是在pending

为何会一直在pending状态?

接着查看表单验证的官方文档

自定义异步验证器和同步验证器很像,只是它们必须返回一个稍后会输出 null 或“验证错误对象”的承诺(Promise)或可观察对象,如果是可观察对象,那么它必须在某个时间点被完成(complete),那时候这个表单就会使用它输出的最后一个值作为验证结果。(译注:HTTP 服务是自动完成的,但是某些自定义的可观察对象可能需要手动调用 complete 方法)
返回的可观察对象必须是有限的,也就是说,它必须在某个时间点结束(complete)。要把无尽的可观察对象转换成有限的,可以使用 first、last、take 或 takeUntil 等过滤型管道对其进行处理。

结果很明显了,上面的观察者对象是通过valueChangs产生的, 被人订阅后,并不会主动的调用complete()方法,而会不停的发布新值。下面的例子可以看出来

给他加个first()让他只返回第一个结果,果然好使了:

first(predicate: function(value: T, index: number, source: Observable<T>): boolean, resultSelector:function(value: T, index: number): R, defaultValue: R): Observable<T | R>
只发出由源 Observable 所发出的值中第一个(或第一个满足条件的值)。

如果你足够细心

看的太不仔细了,到解决这个问题之前,一直都没发现……

一个更简单的实现方式

验证的防抖功能实际上并不需要通过上面的方式实现,尽管上面也并不困难。

最简单的防抖方式,在官方文档已经提供了:

默认情况下,每当表单值变化之后,都会执行所有验证器。对于同步验证器,没有什么会显著影响应用性能的地方。不过,异步验证器通常会执行某种 HTTP 请求来对控件进行验证。如果在每次按键之后都发出 HTTP 请求会给后端 API 带来沉重的负担,应该尽量避免。

我们可以把updateOn属性从change(默认值)改成submit或blur来推迟表单验证的更新时机。

 /**
  * 初始化表单
  */
 initForm() {
  this.modifyPasswordForm = this.fb.group({
    oldPassword: [null, [Validators.required], [this.userService.oldPasswordValidator()]],
    newPassword: [null, Validators.required],
    confirmNewPassword: [null, Validators.required]

    // updateOn 作用是在什么时候更新表单数据
    // https://angular.cn/guide/form-validation#note-on-performance
   }, {updateOn: 'blur'},
  );
 }

想了解更多updateOn的内容,可查看这篇文章。

总结

这次的问题可以完全说出在了看文档不仔细,神奇的是看了几遍那个StackOverflow上的回答都没发现他比我多了一个first(),虽然因此浪费了不少的时间,但收获也是巨大的,这波不亏。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

  • 详解Angular开发中的登陆与身份验证
  • AngularJS实现表单验证
  • AngularJS使用ngMessages进行表单验证
  • AngularJS实现表单手动验证和表单自动验证
  • 详解AngularJS实现表单验证
  • Angular2表单自定义验证器的实现
  • angular实现表单验证及提交功能
  • Angular2使用Guard和Resolve进行验证和权限控制
  • 教你用AngularJS框架一行JS代码实现控件验证效果
  • AngularJs验证重复密码的方法(两种)

相关文章

  • angular异步验证防抖踩坑实录

    angular异步验证防抖踩坑实录

    前言 本周的一个需求是在一个异步验证上加上防抖,防抖,以前也接触过,依稀记得不难,就没再去看angluar的官方文档,直接就开始google写了,然后……一不小心就掉坑
    2019-12-02
  • Python函数的默认参数设计示例详解

    Python函数的默认参数设计示例详解

    在Python教程里,针对默认参数,给了一个“重要警告”的例子: def f(a, L=[]): L.append(a) return L print(f(1)) print(f(2)) print(f(3)) 默认值只会执行
    2019-12-02
  • 如何利用Golang解析读取Mysql备份文件

    如何利用Golang解析读取Mysql备份文件

    前言 前期误操作,导致数据库表删除,虽然数据量不多,但是通过binlog恢复比较麻烦,通过备份文件来恢复,备份文件达36个G打开都是问题; 使用备份文件恢复 大
    2019-12-02
  • 关于Yii2框架跑脚本时内存泄漏问题的分析与解决

    关于Yii2框架跑脚本时内存泄漏问题的分析与解决

    现象 在跑 edu_ocr_img 表的归档时,每跑几万个数据,都会报一次内存耗尽 PHP Fatal error: Allowed memory size of 134217728 bytesexhausted (tried toalloc
    2019-12-02
  • 利用python实现冒泡排序算法实例代码

    利用python实现冒泡排序算法实例代码

    冒泡排序 冒泡排序(英语:Bubble Sort)是一种简单的排序算法。它重复地遍历要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。遍历数列的
    2019-12-02
  • 关于MySQL的时间进位问题浅析

    关于MySQL的时间进位问题浅析

    MySQL 当中默认的时间类型(datetime 和 timestamp)的精度是秒,如果设置进去的时间值精度小于秒的话,就会被四舍五入,可能导致数据库中的值比原始值多了一秒。也
    2019-12-02
  • angular8和ngrx8结合使用的步骤介绍

    angular8和ngrx8结合使用的步骤介绍

    一、案例运行后的效果图 二、关于ngrx的认识 1、官网地址 2、ngrx是借鉴redux的思维,专门为angular中定制的一个状态管理的包,类似react中的redux、vue中的vuex,
    2019-12-02
  • Mybatis批量插入更新xml方式和注解方式的方法实例

    Mybatis批量插入更新xml方式和注解方式的方法实例

    前言 最近工作上遇到很多批量插入的场景,但是百度很难得到我想要的结果,而且查出来的效果不是很好~ 所以就自己来写一份给大家参考,希望对大家有用 Mybati
    2019-12-02
  • vue中上传视频或图片或图片和文字一起到后端的解决方法

    vue中上传视频或图片或图片和文字一起到后端的解决方法

    Vue图片与文字混输的实现方法可以参考这篇文章 https://juejin.im/post/5de26d39e51d455da17be1e3 vue中上传视频或图片或图片和文字一起到后端 1.上传图片或视频:
    2019-12-02
  • Asp.Net Core使用swagger生成api文档的完整步骤

    Asp.Net Core使用swagger生成api文档的完整步骤

    前言 .Net Core中有两个集成NSwag的包,分别为Swashbuckle和NSwag。两者的配置大同小异。这里以NSwag为例。 一、前期准备 1、初始化asp.net core 测试项目 新
    2019-12-02

最新评论