正文

使用angular自定义字段校验指令

我想和这个世界谈谈V  2022-02-16  126

关键词：

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 选择器添加到输入框上就可以激活这个验证器。

在模板中使用

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

在 Angular 6 中创建用于跨字段验证（确认密码）的自定义指令

】在Angular6中创建用于跨字段验证（确认密码）的自定义指令【英文标题】：Creatingacustomdirectiveforcrossfieldvalidation(confirmpassword)inangular6【发布时间】：2019-01-0609:00:02【问题描述】：我创建了一个组件（set-pass），我想在这个组件中... 查看详情

Angular - 使用自定义指令加载多个组件返回未定义

】Angular-使用自定义指令加载多个组件返回未定义【英文标题】：Angular-Usingcustomdirectivetoloadseveralcomponentsisreturningundefined【发布时间】：2021-09-0303:32:20【问题描述】：我正在开发一个应用程序，目前，我有一个动态网格生成器，... 查看详情

如何使用 ControlValueAccessor Angular 在自定义输入中使用指令

】如何使用ControlValueAccessorAngular在自定义输入中使用指令【英文标题】：HowToUseADirectiveInACustomInputWithControlValueAccessorAngular【发布时间】：2020-06-0308:26:03【问题描述】：我已经在我的Angular应用程序中使用ControlValueAccessor创建了一个... 查看详情

Angular 2+将指令传递给自定义组件

】Angular2+将指令传递给自定义组件【英文标题】：Angular2+passdirectivestoacustomcomponent【发布时间】：2018-06-1401:25:49【问题描述】：我创建了一个自定义组件，它拥有自己的@input()、@output等等。该组件有一个<input/>字段，用... 查看详情

angular中的内置指令和自定义指令

NG中的指令，到底是什么(what)？为什么会有(why)？以及怎样使用(how)？What：在NG中，指令扩展HTML功能，为DOM元素调用方法、定义行为绑定数据等。Why：最大程度减少DOM操作，实现数据绑定，与业务逻辑进行交互。How：指令主要分... 查看详情

angular2 自定义指令输入语法

】angular2自定义指令输入语法【英文标题】：angular2customdirectivesinputssyntax【发布时间】：2016-06-0301:04:08【问题描述】：我创建了一个自定义指令并将selector值设置为“[unless-directive]”。指令获取一个布尔值并使用它来改变视图：im... 查看详情

错误多个指令 [bar, bar] 在使用自定义指令和 angular-bootstrap 时要求模板

】错误多个指令[bar,bar]在使用自定义指令和angular-bootstrap时要求模板【英文标题】：ErrorMultipledirectives[bar,bar]askingfortemplateonwhenusedcustomdirectiveandangular-bootstrap【发布时间】：2014-11-1719:18:53【问题描述】：我试图创建一个自定义指令... 查看详情

angular自定义指令命名的那个坑

...质上是在HTML中通过元素、属性、类或注释来添加功能。AngularJS的内置指令都是以ng开头，如果想自定义指令，建议自定义一个前缀代表自己的命名空间。这里我们先使用my作为前缀:varmyApp=angular.module(‘myApp‘,[]).directive(‘myDirectiv... 查看详情

如何在 Angular 10 中使用自定义指令设置元素的占位符样式？

】如何在Angular10中使用自定义指令设置元素的占位符样式？【英文标题】：HowtostyleplaceholderofanelementusingcustomdirectiveinAngular10?【发布时间】：2021-05-1804:39:34【问题描述】：我有一个使用ElementRef和Renderer2来设置元素样式的指令。我... 查看详情

Angular 自定义指令范围未按预期更新

】Angular自定义指令范围未按预期更新【英文标题】：Angularcustomdirectivescopenotupdatingasexpected【发布时间】：2015-10-2010:57:11【问题描述】：我的TypeScript应用程序的页面上使用了一些指令，每个指令都有自己的控制器来管理自己的范... 查看详情

Angular2如何对自定义验证器指令进行单元测试？

】Angular2如何对自定义验证器指令进行单元测试？【英文标题】：Angular2howtounittestacustomvalidatordirective?【发布时间】：2017-02-1820:19:43【问题描述】：我为输入字段编写了一个非常简单的自定义验证器：importDirectivefrom\'@angular/core\';i... 查看详情

Angular - 加载图像 src 后的自定义指令

】Angular-加载图像src后的自定义指令【英文标题】：Angular-customdirectiveafterimagesrcloaded【发布时间】：2018-12-1708:56:46【问题描述】：我有一个问题。使用指令[src]加载后，我必须获取图像的宽度和高度。我得到了这个html，它使用@inp... 查看详情

自定义指令可以使用 Angular Material 为输入设置占位符吗？

】自定义指令可以使用AngularMaterial为输入设置占位符吗？【英文标题】：CanacustomdirectivesettheplaceholderforaninputusingAngularMaterial?【发布时间】：2017-10-2512:32:23【问题描述】：考虑一下我的html：<md-input-container><inputmdInputmyCustomDi... 查看详情

Angular 2 在 3rd 方指令中使用自定义组件选择器

】Angular2在3rd方指令中使用自定义组件选择器【英文标题】：Angular2usecustomcomponentselectorin3rdpartydirective【发布时间】：2016-10-0318:38:51【问题描述】：我正在使用ng2-bootsrap\'saccordiondirective。使用以下语法可以正常处理普通html：<acc... 查看详情

Angular 自定义指令在 ng-repeat 中使用 if 条件

】Angular自定义指令在ng-repeat中使用if条件【英文标题】：Angularcustomdirectivetouseanifconditioninng-repeat【发布时间】：2019-10-1818:38:57【问题描述】：我正在使用面板来显示本质上是动态的响应。我想使用2种不同的颜色来区分面板，即... 查看详情

如何使用 Angular 6 中的自定义指令来呈现动态生成的内联 SVG

】如何使用Angular6中的自定义指令来呈现动态生成的内联SVG【英文标题】：HowtorenderdynamicallygeneratedinlineSVGbyusingcustomdirectiveinangular6【发布时间】：2018-12-1504:30:19【问题描述】：在我的应用程序中呈现动态生成的内联SVG时遇到困难... 查看详情

在自定义指令 angular 4 中实现 onclick()

】在自定义指令angular4中实现onclick()【英文标题】：implementonclick()incustomdirectiveangular4【发布时间】：2018-03-3122:20:06【问题描述】：我有一个简单的按钮和一个指令，我想访问按钮的样式，在指令中添加带有onclick()函数的MarginLeft... 查看详情

如何在 *ngTemplateOutlet 中使用上下文和带有材料表的 Angular 中的自定义指令

】如何在*ngTemplateOutlet中使用上下文和带有材料表的Angular中的自定义指令【英文标题】：Howtousecontextin*ngTemplateOutletwithcustomDirectiveinAngularwithMaterialTables【发布时间】：2019-11-2500:03:56【问题描述】：使用的框架：Angular8和MaterialDesign... 查看详情

正文