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


Posted in Javascript onFebruary 01, 2019

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, multi: true}
  ]

Angular 在验证流程中的识别出指令的作用,是因为指令把自己注册到了 NG_VALIDATORS 提供商中,该提供商拥有一组可扩展的验证器。

实现 Validator 接口

import {Directive, Input} from '@angular/core';
import {Validator, AbstractControl, NG_VALIDATORS} from '@angular/forms';

@Directive({
  selector: '[appValidator]',
    providers: [
      {provide: NG_VALIDATORS, useExisting: ValidatorDirective, multi: true}
    ]
})

export class ValidatorDirective implements Validator {
  @Input('appValidator') value: string;

  validate(control: AbstractControl): { [key: string]: any } | null {
    const validateMac = /^(([A-Fa-f0-9]{2}[:]){5}[A-Fa-f0-9]{2}[,]?)+$/;
    switch (this.value) {
      case 'mac':
        return validateMac.exec(control['value']) ? null : {validate: true};
        break;
    }
  }

}

ValidatorDirective写好后,只要把 appValidator 选择器添加到输入框上就可以激活这个验证器。

在模板中使用

首先在模板所在的module中引入该指令

import {ValidatorDirective} from "../../shared/validator.directive";

@NgModule({
  imports: [
    SharedModule
  ],
  declarations: [
    ValidatorDirective
  ],
  providers: [
    AuthGuard
  ],
})

在html中使用

<nz-form-item>
    <nz-form-control>
      <nz-input-group>
        <input formControlName="mac" nz-input type="text" placeholder="mac" appValidator="mac">
      </nz-input-group>
      <nz-form-explain *ngIf="validateForm.get('mac').dirty && validateForm.get('mac').errors">
        请输入正确的Mac地址!
      </nz-form-explain>
    </nz-form-control>
  </nz-form-item>

在mac地址校验不通过时,错误信息便会显示。如果想在失去焦点时显示错误信息可以使用validateForm.get('mac').touched,如下:

<nz-form-explain *ngIf="validateForm.get('mac').dirty && validateForm.get('mac').errors&&validateForm.get('mac').touched">
        请输入正确的Mac地址!
      </nz-form-explain>

到此,自定义字段验证指令就完成了,更多请查看Angular官网表单验证自定义验证器部分。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js版本A*寻路算法
Dec 22 Javascript
JavaScript 数组循环引起的思考
Jan 01 Javascript
JavaScript 面向对象之命名空间
May 04 Javascript
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
angular中如何绑定iframe中src的方法
Feb 01 #Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 #Javascript
JS集合set类的实现与使用方法示例
Feb 01 #Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 #jQuery
详解Vue中watch对象内属性的方法
Feb 01 #Javascript
JS字典Dictionary类定义与用法示例
Feb 01 #Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 #Javascript
You might like
php单件模式结合命令链模式使用说明
2008/09/07 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
python实现决策树分类(2)
2018/08/30 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
python写入文件自动换行问题的方法
2019/07/05 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
企业为何需要商业计划书
2013/12/26 职场文书
项目负责人任命书
2014/06/04 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
邀请函的格式
2015/01/30 职场文书
荆州古城导游词
2015/02/06 职场文书
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js
Vue全局事件总线你了解吗
2022/02/24 Vue.js