使用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 相关文章推荐
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
jQuery.holdReady()使用方法
May 20 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
详解ES6中的let命令
Apr 05 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
JavaScript进制转换实现方法解析
Jan 18 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中文本操作的类
2007/03/17 PHP
用Zend Encode编写开发PHP程序
2010/02/21 PHP
php设计模式小结
2013/02/15 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
Django返回json数据用法示例
2016/09/18 Python
Python 查看文件的读写权限方法
2018/01/23 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
python批量图片处理简单示例
2019/08/06 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
python实现两个文件夹的同步
2019/08/29 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
缓刑人员思想汇报500字
2014/09/12 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
实习生个人总结范文
2015/02/28 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS