使用Angular自定義字段校驗(yàn)指令的方法示例
Angular中，提供的表單驗(yàn)證不能用于所有應(yīng)用場(chǎng)景，就需要?jiǎng)?chuàng)建自定義驗(yàn)證器，比如對(duì)IP、MAC的合法性校驗(yàn)
這里是根據(jù)官網(wǎng)實(shí)例自定義MAC地址的正則校驗(yàn)，環(huán)境為Angular： 7.2.0 ， NG-ZORRO：v7.0.0-rc3
添加指令
/shared/validator.directive.ts
注冊(cè)到 NG_VALIDATORS 提供商中
providers: [
{provide: NG_VALIDATORS, useExisting: ValidatorDirective, multi: true}
]
Angular 在驗(yàn)證流程中的識(shí)別出指令的作用，是因?yàn)橹噶畎炎约鹤?cè)到了 NG_VALIDATORS 提供商中，該提供商擁有一組可擴(kuò)展的驗(yàn)證器。
實(shí)現(xiàn) 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寫(xiě)好后，只要把 appValidator 選擇器添加到輸入框上就可以激活這個(gè)驗(yàn)證器。
在模板中使用
首先在模板所在的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">
請(qǐng)輸入正確的Mac地址!
</nz-form-explain>
</nz-form-control>
</nz-form-item>
在mac地址校驗(yàn)不通過(guò)時(shí)，錯(cuò)誤信息便會(huì)顯示。如果想在失去焦點(diǎn)時(shí)顯示錯(cuò)誤信息可以使用validateForm.get('mac').touched,如下：
<nz-form-explain *ngIf="validateForm.get('mac').dirty && validateForm.get('mac').errors&&validateForm.get('mac').touched">
請(qǐng)輸入正確的Mac地址!
</nz-form-explain>
到此，自定義字段驗(yàn)證指令就完成了，更多請(qǐng)查看Angular官網(wǎng)表單驗(yàn)證自定義驗(yàn)證器部分。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- Angular實(shí)現(xiàn)模版驅(qū)動(dòng)表單的自定義校驗(yàn)功能(密碼確認(rèn)為例)
- angular4中關(guān)于表單的校驗(yàn)示例
- Angular模板表單校驗(yàn)方法詳解
- Angular在模板驅(qū)動(dòng)表單中自定義校驗(yàn)器的方法
- Angularjs使用指令做表單校驗(yàn)的方法
- Angular.js與node.js項(xiàng)目里用cookie校驗(yàn)賬戶(hù)登錄詳解
- AngularJs表單校驗(yàn)功能實(shí)例代碼
- 在 Angular2 中實(shí)現(xiàn)自定義校驗(yàn)指令（確認(rèn)密碼）的方法
- AngularJS入門(mén)教程之表單校驗(yàn)用法示例
相關(guān)文章
AngularJS基礎(chǔ) ng-list 指令詳解及示例代碼
本文主要介紹AngularJS ng-list 指令,這里幫大家整理了ng-list指令的基本資料,并附有示例代碼,有需要的小伙伴可以參考下2016-08-08
基于Angular.js實(shí)現(xiàn)的觸摸滑動(dòng)動(dòng)畫(huà)實(shí)例代碼
這篇文章主要介紹了基于Angular.js實(shí)現(xiàn)的觸摸滑動(dòng)動(dòng)畫(huà)實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了使用ng-packagr打包Angular的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Angular5中調(diào)用第三方庫(kù)及jQuery的添加的方法
這篇文章主要介紹了Angular5中調(diào)用第三方庫(kù)及jQuery的添加的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
angularjs使用directive實(shí)現(xiàn)分頁(yè)組件的示例
Angular?結(jié)合?dygraphs?實(shí)現(xiàn)?annotation功能
angularjs點(diǎn)擊圖片放大實(shí)現(xiàn)上傳圖片預(yù)覽
