Angular跨字段验证器中如何直接调用其它独立的验证器

 更新时间:2022年03月24日 10:36:46   作者:myskies  
我们在开发的时候都会用到表单,那么验证器就是必不可少的东西,这篇文章主要给大家介绍了关于在Angular跨字段验证器中如何直接调用其它独立的验证器的相关资料,需要的朋友可以参考下

angular中关于表单动态验证的一种新思路一文中我们给出了Angular项目进行字段校验的三种方法。本文我们将重点围绕第一种方法展开讨论。

假设有如下应用:

该应用的功能是对输入的数值的奇偶数进行判断,如果满足条件,则启用Submit按钮,否则不启用。

跨字段验证

由于对输入数值的校验是根据输入类型来区分的,所以这里我们需要一个跨输入类型及输入数值的验证器:

ngOnInit(): void {
    this.formGroup.setValidators((formGroup) => {
      formGroup = formGroup as FormGroup;
      const type = formGroup.get('type').value as number;
      if (type === 0) {
        // 验证是否是偶数 1️⃣
      } else {
        // 验证是否为奇数 1️⃣
      }
    });
  }

虽然我们可以在1️⃣处直接写入验证器的逻辑,但从分工的角度上来讲,这往往是最坏的一种的方案。

为此,我们同时准备了验证器:

/**
 * 数字校验器
 */
export class NumberValidator {
  /**
   * 偶数校验器
   */
  static isEven(control: AbstractControl): ValidationErrors | null {
    const value = +control.value as number;
    if (Number.isInteger(value) && value % 2 === 0) {
      return null;
    } else {
      return { isEven: '输入的数字不是偶数' };
    }
  }

  /**
   * 奇数校验器
   */
  static isOdd(control: AbstractControl): ValidationErrors | null {
    const value = +control.value as number;
    if (Number.isInteger(value) && value % 2 === 1) {
      return null;
    } else {
      return { isOdd: '输入的数字不是奇数' };
    }
  }
}

使用独立的验证器

有了独立的验证器后,我们可以使用类似如下的代码,直接在跨字段校验器中进行调用:

ngOnInit(): void {
    this.formGroup.setValidators((formGroup) => {
      formGroup = formGroup as FormGroup;
      const type = formGroup.get('type').value as number;
      if (type === 0) {
        return NumberValidator.isEven(formGroup.get('value')); 🟢
      } else {
        return NumberValidator.isOdd(formGroup.get('value')); 🟢
      }
    });
  }

是的,在调用的时候将需要验证的FormControl传入即可。

如果我们的跨字段验证器需要同时对多个字段进行校验,则还可以这样:

const result = {
          ...Validators.required(formGroup.get(this.formKeys.image)),
          ...Validators.required(formGroup.get(this.formKeys.imageLeftTopPoint)),
          ...Validators.required(formGroup.get(this.formKeys.imageRightBottomPoint)),
          ...MapPointValidator.isPoint(formGroup.get(this.formKeys.imageLeftTopPoint)),
          ...MapPointValidator.isPoint(formGroup.get(this.formKeys.imageRightBottomPoint))
        }

        return Object.keys(result).length === 0 ? null : result; 🟩

🟩 处对返回的错误信息进行判断,如果长度为0,则说明返回了{},直接返回null,否则返回多个验证器拼接后的错误信息。

如果你想看到具体的代码,请点击:示例代码

总结

到此这篇关于Angular跨字段验证器中如何直接调用其它独立的验证器的文章就介绍到这了,更多相关Angular调用其它独立验证器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • AngularJS封装$http.post()实例详解

    AngularJS封装$http.post()实例详解

    这篇文章主要介绍了 AngularJS封装$http.post()实例详解的相关资料,需要的朋友可以参考下
    2017-05-05
  • angular多语言配置详解

    angular多语言配置详解

    这篇文章主要介绍了angular多语言配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • AngularJs学习第八篇 过滤器filter创建

    AngularJs学习第八篇 过滤器filter创建

    这篇文章主要介绍了AngularJs学习第八篇 过滤器filter创建的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • Angular6 用户自定义标签开发的实现方法

    Angular6 用户自定义标签开发的实现方法

    这篇文章主要介绍了Angular6 用户自定义标签开发的实现方法,下面我们就通过一个简单的例子演示Angular6中的这一新功能,小编觉得挺不错的,现在分享给大家,需要的朋友可以参考下
    2019-01-01
  • Angular.JS内置服务$http对数据库的增删改使用教程

    Angular.JS内置服务$http对数据库的增删改使用教程

    我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象,下面这篇文章主要给大家介绍了关于Angular.JS内置服务$http对数据库的增删改等操作的相关资料,需要的朋友可以参考下。
    2017-05-05
  • AngularJS中实现动画效果的方法

    AngularJS中实现动画效果的方法

    本文主要介绍AngularJS 动画,这里对动画的资料详细介绍并附有效果图和代码实例,有需要的小伙伴参考下
    2016-07-07
  • 关于Angular2 + node接口调试的解决方案

    关于Angular2 + node接口调试的解决方案

    这篇文章主要给大家介绍了关于Angular2 + node接口调试的解决方案,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-05-05
  • Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法

    Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法

    ng-template 是用来定义模板的,当使用ng-template定义好一个模板之后,可以用ng-container和templateOutlet指令来进行使用。这篇文章给大家介绍了Angular中的ng-templateangular及使用 ngTemplateOutlet 指令的方法,需要的朋友参考下吧
    2018-08-08
  • Angularjs 创建可复用组件实例代码

    Angularjs 创建可复用组件实例代码

    这篇文章主要介绍了Angularjs 创建可复用组件实例代码的相关资料,需要的朋友可以参考下
    2016-10-10
  • Angularjs整合微信UI(weui)

    Angularjs整合微信UI(weui)

    本文给大家推荐的是使用angularjs实现整合微信新推出的UI(weui)的全部过程,有相同需求的小伙伴可以参考下
    2016-03-03

最新评论