使用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, 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官网表单验证自定义验证器部分。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Angular实现模版驱动表单的自定义校验功能(密码确认为例)

    HTML5原生的表单校验属性(必填,长度限制,取值间隔,正则表达式等等)可以满足普通的校验需求,但是有些场景必须用到自定义校验,比如注册时的密码确认,有比对关系的时间/数值选择, 需要到请求到服务端取值验证等等···这里以密码确认为例进行说明. 指令开发 表单的验证状态是通过 formContro l的 errors 属性反馈出来的,所以基本的思路肯定就是需要添加校验规则,然后将验证结果添加到formControl实例的errors属性中.那么问题来了,模版驱动表单的控制都是在HTML模版中完成

  • Angular模板表单校验方法详解

    本文实例为大家分享了Angular模板表单校验的方法,供大家参考,具体内容如下 1. 创建指令 ng g directive directives/mobileValidator 2. html <form #myForm="ngForm" (ngSubmit)="onSubmit2(myForm.value, myForm.valid)"> <div> <h3>登录</h3> </div> <div

  • angular4中关于表单的校验示例

    本章中介绍响应式表单的创建及表单输入值的校验,对于模板表单就略过. 一.使用响应式表单的步骤 1.在模块(一般是app.module.ts)中引入ReactiveFormsModule 2.在组件的ts文件中使用响应式表单 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms'; export class ReactiveFormComponent implements OnInit { p

  • 在 Angular2 中实现自定义校验指令（确认密码）的方法

    在 Angular2 中实现自定义校验指令（确认密码）的方法

    我们会在本文中探索 Angular 2 内建的自定义验证. # 介绍 Angular 2 原生就支持一些有用的验证器: required: 验证字段必须存在 minlength: 验证字段值的最小长度有效 maxlength: 验证字段值的最大长度有效 pattern: 验证输入的值是否匹配给定的模板,比如 email 我们会基于下面的接口创建一个表单来获取用户信息. // user.interface.ts export interface User { username: string; /

  • Angular在模板驱动表单中自定义校验器的方法

    引言 模板驱动表单相比较响应式表单可以少更少的代码做同样的事情,可也损失了自由度与更易测试,当然很多人并不在乎啦. 所以我相信很多人在编写Angular不自由自主去更倾向于模板驱动表单的写法. 表单最核心的是校验体验,在Angular中简直就是发挥到了极致,比如:required.min.max.pattern 等,这些原本是HTML DOM元素中的表述,而Angular默认实现了一整套的校验指令,比如:required 对应 RequiredValidator. 然后很多时候我们需要一些特殊的

  • Angular.js与node.js项目里用cookie校验账户登录详解

    Angular.js与node.js项目里用cookie校验账户登录详解

    前言 最近的新项目中,用户登录需要采用cookie来记住用户,校验身份.所以本文就把实现的过程总结出来分享给大家,需要的朋友们可以参考学习. 在header中携带authId登录 在之前老的项目里,没有采用cookie来记录用户登录状态,而是在请求的header中携带一个身份标识来校验,大致方案如下: 客户端使用post请求提交user.password给服务端进行登录操作: 服务端校验用户是否合法,如果合法将产生一个唯一的身份标识authId,返回给客户端,客户端将此authId存放本地(如l

  • AngularJS入门教程之表单校验用法示例

    AngularJS入门教程之表单校验用法示例

    本文实例讲述了AngularJS表单校验用法.分享给大家供大家参考,具体如下: 表单数据的校验对于提高WEB安全性意义不大,因为服务器接收到的请求不一定来自我们的前端页面,有可能来自别的站点,黑客可以自己做一个表单,把数据提交到我们的服务器(即跨站伪造请求),这样就绕过了前端页面的校验.如果对HTTP协议比较熟,甚至还可以在程序中手动构造一段HTTP请求发到服务器,所以服务器端的数据校验绝对是必不可少的. WEB前端数据校验的意义在于改善用户体验,用户不用等到將数据提交到服务器后才知道哪些数据是

  • Angularjs使用指令做表单校验的方法

    前言 通常,使用angular做表单验证,一般都是把验证规则单独写为service,然后通过依赖注入的方式调用.在个别情况下,例如用户注册表单,需要根据用户输入给出不同提示信息,使用service略显不合适宜,所以可以采用指令的方式. 简易表单 如下为一个简易表单,有四项提示信息,依据状态呈现.校验规则为数字,大写字母,小写字母至少出现两项,通过正则配合ng-pattern能够实现相同的效果,此处仅为引入指令校验,不做深究.其中,user-validator为自定义指令. <form class

  • AngularJs表单校验功能实例代码

    废话不多说了,具体代码如下所示: <!DOCTYPE html> <html ng-app="angularFormCheckModule"> <head> <meta charset="UTF-8"> <title>angular表单校验</title> <link rel="stylesheet" href="../css/bootstrap.min.cs

  • 使用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

  • 在Angular中使用JWT认证方法示例

    本文介绍了在Angular中使用JWT认证方法示例,分享给大家,具体如下: 项目地址: grading-system 基于session的认证和基于token的认证的方式已经被广泛使用.在session认证中,服务端会存储一份用户登录信息,这份登录信息会在响应时传递给浏览器并保存为Cookie,在下次请求时,会带上这份登录信息,这样就能识别请求来自哪个用户. 在基于session的认证中,每个用户都要生成一份session,这份session通常保存在内存中,随着用户量的增加,服务端的开销会增大

  • PHP基于自定义函数生成笛卡尔积的方法示例

    本文实例讲述了PHP基于自定义函数生成笛卡尔积的方法.分享给大家供大家参考,具体如下: <?php $color = array('red', 'green'); $size = array(39, 40, 41); $local = array('beijing', 'shanghai'); echo "<pre>"; print_r(combineDika($color, $size, $local)); /** * 所有数组的笛卡尔积 * * @param un

  • Python pandas自定义函数的使用方法示例

    本文实例讲述了Python pandas自定义函数的使用方法.分享给大家供大家参考,具体如下: 自定义函数的使用 import numpy as np import pandas as pd # todo 将自定义的函数作用到dataframe的行和列 或者Serise的行上 ser1 = pd.Series(np.random.randint(-10,10,5),index=list('abcde')) df1 = pd.DataFrame(np.random.randint(-10,10,(

  • Java实现微信公众号自定义菜单的创建方法示例

    本文实例讲述了Java实现微信公众号自定义菜单的创建方法.分享给大家供大家参考,具体如下: 开发公众号的时候可能需要给一些自定义菜单添加事件,比如点击某菜单然后服务端给用户推送信息. 我们也可以使用微信提供的网页调试工具直接生成菜单,不过需要考虑是否影响用户问题. 注意:使用代码自定义菜单事件,手动添加的菜单会失效!谨慎使用! 官方文档 httpClientUtil工具类需要的话可以在前面微信公众号获取access_token中获取 public class WechatDIYMenuTest

  • TP5框架实现自定义分页样式的方法示例

    本文实例讲述了TP5框架实现自定义分页样式的方法.分享给大家供大家参考,具体如下: 1. 在extend\目录下创建page目录,在page目录下创建Page.php文件,将以下代码放入文件中. <?php namespace page; use think\Paginator; class Page extends Paginator { //首页 protected function home() { if ($this->currentPage() > 1) { return &q

  • Angular自定义指令Tooltip的方法实例

    Angular自定义指令Tooltip的方法实例

    目录 目录结构 编写 tooltip 组件 编写 tooltip 指令 页面上调用 总结 Yeah,关注我的读者应该知道,上一篇文章了解 Angular 开发的内容,我们已经概览了 Angular 的相关内容.在自定义指令的部分,我们已经能够实现编写,但是,在实际场景中,我们还需要标准化的管理. Angular 是 Angular.js 的升版 So,本文,我们就以 Tooltip 来讲解下自定义指令的内容. 线上效果图,如下: 目录结构 在上一篇文章的实现的代码项目基础上,执行命令行: # 进

  • 基于Laravel5.4实现多字段登录功能方法示例

    前言 最近在一个项目中需要实现一个多字段登录功能,简单来说就是可以使用用户名.邮箱或手机号任意一种方式进行登录.所以本文就来给大家介绍了关于Laravel5.4多字段登录的相关内容,分享出来供大家参考学习,话不多说了,来一起看看详细的介绍吧. 以下内容基于laravel5.4 方法如下: 首先,通过artisan工具生成auth模块 php artisan make:auth 这时候App\Http\Controllers目录下会新增一个Auth目录,该目录下为注册登录相关的控制器,resour

  • 通过自定义字段重新排序 WordPress 文章方法

    通过自定义字段重新排序 WordPress 文章方法

    您想更改网站博客页面上 WordPress 文章的顺序吗?那么您就在正确的地方学习此功能并更改文章的顺序.因此,在本文中,我将向您展示如何通过自定义字段更改文章的顺序. WordPress 中文章的默认顺序基于发布日期,并按时间倒序显示.这意味着它将在顶部显示最新的文章. 通过为 WordPress 添加自定义字段,您可以根据该自定义字段更改顺序. 我将在下面的分步指南中解释如何创建自定义字段并更改博客页面上文章的顺序. 按自定义字段排序 WordPress 文章 让我们开始在帖子中创建一个自定

随机推荐