使用Angular自定義字段校驗指令

2022-09-13 16:24:10 字數 851 閱讀 9009

angular中,提供的表單驗證不能用於所有應用場景,就需要建立自定義驗證器,比如對ip、mac的合法性校驗

這裡是根據官網例項自定義mac位址的正則校驗,環境為angular: 7.2.0 , ng-zorro:v7.0.0-rc3

新增指令

/shared/validator.directive.ts

註冊到ng_validators提供商中

providers: [

]

angular 在驗證流程中的識別出指令的作用,是因為指令把自己註冊到了 ng_validators 提供商中,該提供商擁有一組可擴充套件的驗證器。

實現validator介面

import  from '@angular/core';

import from '@angular/forms';

@directive(

]})export class validatordirective implements validator | null [:])[a-fa-f0-9][,]?)+$/;

switch (this.value) ;

break;}}

}

在模板中使用
import  from "../../shared/validator.directive";

@ngmodule()

請輸入正確的mac位址!

請輸入正確的mac位址!

到此,自定義字段驗證指令就完成了,更多請檢視angular官網表單驗證自定義驗證器部分。

使用自定義字段

轉儲所有自定義字段作為列表顯示乙個特定自定義欄位的值id,mood true mood 將是自定義欄位的id值 顯示相同自定義欄位id的多個值id,songs false 僅在存在時顯示自定義字段 邏輯 url get post meta post id,snippet reference url ...

angular 自定義指令

模板 var mymodule angular.module mymodule mymodule.directive directivename function return restrict string,template string,templateurl string,priority n...

angular自定義指令詳解

在運用angularjs的時候,運用自定義指令可以寫一些元件,非常方便。這裡給大家分享一些關於angular自定義指令的知識。對於指令,可以把它簡單的理解成在特定dom元素上執行的函式,指令可以擴充套件這個元素 的功能。directive mydirective function timeout,u...