使用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 相关文章推荐
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
使用js显示当前时间示例
Mar 02 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
Bootstrap安装环境配置教程分享
May 27 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
vue一步步实现alert功能
Jul 05 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 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中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
php制作简单模版引擎
2016/04/07 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
python之yield表达式学习
2014/09/02 Python
Python sys.argv用法实例
2015/05/28 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
python中pivot()函数基础知识点
2021/01/03 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
美国批发供应商:Kole Imports
2019/04/10 全球购物
全球性的在线商店:Vogca
2019/05/10 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
恶意软件的定义
2014/11/12 面试题
化学教学随笔感言
2014/02/19 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS