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'));
赞 (0)

相关推荐

  • angular 表单验证器验证的同时限制输入的实现

    angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ng-app     启动你angular的模块 ng-controller 控制器,启动你angualr里面的逻辑代码作用在页面上 ng-options  循环你select里面的option标签,很好用的 ng-submit,表单提交执行的 novalidate  表单form配合后期检测的 ng-model  实现双数据绑定 ng-show 根据一定的逻辑实现显示 ng-cloak 绑定在节点

  • angular 实现同步验证器跨字段验证的方法

    几乎每个web应用都会用到表单,Angular 为我们提供了几个内置 validators (验证器),但在实际工作中为了满足项目需求,我们经常需要为应用添加一些自定义验证功能. angular内置验证器 required - 表单控件值非空 email - 表单控件值的格式是 email minlength - 表单控件值的最小长度 maxlength - 表单控件值的最大长度 pattern - 表单控件的值需匹配 pattern 对应的模式(正则表达式) 需求:设置成绩占比时,如果总占比不

  • Angular2表单自定义验证器的实现

    Angular2表单自定义验证器的实现

    本文主要给大家介绍如何判断验证器的结果.在这里,我们就来看看怎样实现一个自定义的验证器. 目标 我们要实现一个验证手机号的验证器,使用的实例还是基于之前的文章里面的实例,也就是用户信息输入的表单页面.我们在手机号的元素上添加一个验证手机号的验证器.然后,如果手机号验证失败,就显示一个错误,页面如下: 这部分教程的代码可以从github获取: git clone https://github.com/Mavlarn/angular2-forms-tutorial 如果要运行,进入项目目录,运行下面

  • Angular2 自定义表单验证器的实现方法

    废话 最近由于项目上需要用到表单验证,前面直接通过 (input) 事件进行数据检查,但是不好和自带的验证器统一,而且也不正统.于是打算研究一下自定义验证器,网上类似的文章很多,但是自己在实现的过程中还是遇到了一些问题.于是还是啰嗦的自己写一篇文章. 正文 这里有官方文档:验证响应式表单,用户的视觉提示,自定义验证器,这篇文章是根据这些文档所来(前面两者就不再赘述比较简单,也说的比较清楚) Angular支持的内置validate属性: required- 设置表单控件值是非空的 email -

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

    目录 跨字段验证 使用独立的验证器 总结 在angular中关于表单动态验证的一种新思路一文中我们给出了Angular项目进行字段校验的三种方法.本文我们将重点围绕第一种方法展开讨论. 假设有如下应用: 该应用的功能是对输入的数值的奇偶数进行判断,如果满足条件,则启用Submit按钮,否则不启用. 跨字段验证 由于对输入数值的校验是根据输入类型来区分的,所以这里我们需要一个跨输入类型及输入数值的验证器: ngOnInit(): void { this.formGroup.setValidator

  • 在Java的Struts中判断是否调用AJAX及用拦截器对其优化

    在Java的Struts中判断是否调用AJAX及用拦截器对其优化

    Strut2判断是否是AJAX调用 1.   AJAX与传统Form表单 实际上,两者一般都是通过HTTP的POST请求.区别是浏览器提交Form表单后,期望服务器返回一个完整的HTML页面.而AJAX调用是由XMLHttpRequest对象(不同浏览器可能不一样)发出,浏览器期望服务器返回HTML片段即可,具体是JSON.XML等都没有要求.返回到浏览器后如何使用,也是由JS脚本自己决定的.   2. 请求是不是AJAX 那么对于服务器端,如何判断一个HTTP请求是不是AJAX调用?这需要看H

  • 使用Angular自定义字段校验指令的方法示例

    Angular中,提供的表单验证不能用于所有应用场景,就需要创建自定义验证器,比如对IP.MAC的合法性校验 这里是根据官网实例自定义MAC地址的正则校验,环境为Angular: 7.2.0 , NG-ZORRO:v7.0.0-rc3 添加指令 /shared/validator.directive.ts 注册到 NG_VALIDATORS 提供商中 providers: [ {provide: NG_VALIDATORS, useExisting: ValidatorDirective, mu

  • asp.net水晶报表参数字段在代码中赋值的方法

    本文实例讲述了asp.net水晶报表参数字段在代码中赋值的方法.分享给大家供大家参考.具体实现方法如下: // 声明将参数传递给查看器控件所需的变量. ParameterFields paramFields = new ParameterFields (); ParameterField paramField = new ParameterField (); ParameterDiscreteValue discreteVal = new ParameterDiscreteValue (); P

  • ThinkPHP中的create方法与自动令牌验证实例教程

    本文实例形式展示了ThinkPHP中的create方法与自动令牌验证的实现方法,具体步骤如下: 一.数据表结构 user表结构如下: id username password 二.view模板部分 \aoli\Home\Tpl\default\User\create.html页面如下: <form action="__URL__/addit" method="post"> <input type="text" name=&quo

  • React中使用async validator进行表单验证的实例代码

    react中进行表单验证毫无疑问是繁琐的,尤其对于动态添加或删除的表单,其验证逻辑更为复杂, 目前UI框架使用material ui ,但其表单处理不太理想,而后研究了一下另一个UI 框架 ant design, 其对表单的处理大大方便了逻辑的编写, 它使用async-validator处理验证逻辑 目前更换框架毫无疑问是不现实的,于是就想直接引入async-validator,下面描述一个简单的使用,具体信息可以去github上查看 validate.js import Schema from

  • django框架中ajax的使用及避开CSRF 验证的方式详解

    django框架中ajax的使用及避开CSRF 验证的方式详解

    本文实例讲述了django框架中ajax的使用及避开CSRF 验证的方式.分享给大家供大家参考,具体如下: ajax(Asynchronous Javascript And Xml) 异步javascript和XML ajax的优点 使用javascript技术向服务器发送异步请求 ajax无须刷新整个页面: 由于ajax响应的是局部页面,因此性能要高 当以get的方式向服务器发送请求: views.py def user_valid(request): name=request.GET.get

  • JAVA中的Token 基于Token的身份验证实例

    最近在做项目开始,涉及到服务器与安卓之间的接口开发,在此开发过程中发现了安卓与一般浏览器不同,安卓在每次发送请求的时候并不会带上上一次请求的SessionId,导致服务器每次接收安卓发送的请求访问时都新建一个Session进行处理,无法通过传统的绑定Session来进行保持登录状态和通讯状态. 基于传统方法无法判断安卓的每次请求访问状态,故查询资料了解到Token,特殊的身份证验证.以下是网上搜寻资料所得,作为学习总结资料. 令牌是一种能够控制站点占有媒体的特殊帧,以区别数据帧及其他控制帧.to

  • Spring拦截器中注入Bean失败解放方案详解

    目录 简介 问题重现 解决方案 简介 说明 本文用示例介绍如何解决拦截器中注入Bean失败的问题. 场景 Token拦截器中需要用@Autowired注入JavaJwtUtil类,结果发现注入的JavaJwtUtil为Null. 原因 拦截器的配置类是以new JwtInterceptor的方式使用的,那么这个JwtInterceptor不受Spring管理.因此,里边@Autowired注入JavaJwtUtil是不会注入进去的. 问题重现 代码 application.yml server:

随机推荐