在 Angular2 中實(shí)現(xiàn)自定義校驗(yàn)指令（確認(rèn)密碼）的方法

更新時(shí)間：2017年01月23日 09:44:21 投稿：mrr

這篇文章給大家探索 Angular 2 內(nèi)建的自定義驗(yàn)證，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下

我們會(huì)在本文中探索 Angular 2 內(nèi)建的自定義驗(yàn)證。

# 介紹

Angular 2 原生就支持一些有用的驗(yàn)證器：

required: 驗(yàn)證字段必須存在
minlength: 驗(yàn)證字段值的最小長(zhǎng)度有效
maxlength: 驗(yàn)證字段值的最大長(zhǎng)度有效
pattern: 驗(yàn)證輸入的值是否匹配給定的模板，比如 email

我們會(huì)基于下面的接口創(chuàng)建一個(gè)表單來(lái)獲取用戶信息。

// user.interface.ts
export interface User {
 username: string; // required, must be 5-8 characters
 email: string; // required, must be valid email format
 password: string; // required, value must be equal to confirm password.
 confirmPassword: string; // required, value must be equal to password.
}

需求

僅在字段數(shù)據(jù)不正確或提交表單的時(shí)候，為每個(gè)字段顯示錯(cuò)誤消息。

UI 展示：

# App 配置

這是我們的文件結(jié)構(gòu)：

|- app/
 |- app.component.html
 |- app.component.ts
 |- app.module.ts
 |- equal-validator.directive.ts
 |- main.ts
 |- user.interface.ts
|- index.html
|- styles.css
|- tsconfig.json

為了使用新的表單模塊，我們需要用 npm install @ angular/forms 指令調(diào)用 npm 包，并在應(yīng)用程序模塊中導(dǎo)入最新的表單模塊。

$ npm install @angular/forms --save

下面是我們應(yīng)用程序的 app.module.ts 模塊:

// app.module.ts
import { NgModule }  from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
 imports:  [ BrowserModule, FormsModule ], // import forms module here
 declarations: [ AppComponent ],
 bootstrap: [ AppComponent ],
})
export class AppModule { }

# App 組件

讓我們繼續(xù)創(chuàng)建 App 組件。

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { User } from './user.interface';
@Component({
 moduleId: module.id,
 selector: 'app-root',
 templateUrl: 'app.component.html',
 styleUrls: ['app.component.css']
})
export class AppComponent implements OnInit {
 public user: User;
 ngOnInit() {
  // initialize model here
  this.user = {
   username: '',
   email: '',
   password: '',
   confirmPassword: ''
  }
 }
 save(model: User, isValid: boolean) {
  // 調(diào)用API保存customer
  console.log(model, isValid);
 }
}

# HTML 視圖

這是我們的 HTML 視圖的樣子。

<!-- app.component.html -->
<div>
 <h1>Add user</h1>
 <form #f="ngForm" novalidate (ngSubmit)="save(f.value, f.valid)">
  <!-- 我們將把驗(yàn)證的字段放在這里 -->
  <button type="submit" [disabled]="!myForm.valid">Submit</button>
 </form>
</div>

現(xiàn)在來(lái)一個(gè)個(gè)添加控件。

用戶名

需求：必填，長(zhǎng)度在 5-8 個(gè)字符之間

<!-- app.component.html -->
...
<div>
 <label>Username</label>
 <input type="text" name="username" [ngModel]="user.username" 
  required minlength="5" maxlength="8" #username="ngModel">
 <small [hidden]="username.valid || (username.pristine && !f.submitted)">
  Username is required (minimum 5 characters).
 </small>
</div>
<pre *ngIf="username.errors">{{ username.errors | json }}</pre>
...

required、minlength、maxlength 都是內(nèi)置的驗(yàn)證器，所以很容易使用。

我們只會(huì)在用戶名無(wú)效、獲得焦點(diǎn)和提交表單的情況下顯示錯(cuò)誤消息。最后一條的 pre 標(biāo)簽在開(kāi)發(fā)過(guò)程中對(duì)調(diào)試很有用。它會(huì)顯示字段的所有驗(yàn)證錯(cuò)誤。

電子郵件地址

需求：必填，必須是有效的電子郵件地址格式

<!-- app.component.html -->
...
<div>
 <label>Email</label>
 <input type="email" name="email" [ngModel]="user.email" 
  required pattern="^[a-zA-Z0–9_.+-]+@[a-zA-Z0–9-]+.[a-zA-Z0–9-.]+$" #email="ngModel" >
 <small [hidden]="email.valid || (email.pristine && !f.submitted)">
  Email is required and format should be <i>john@doe.com</i>.
 </small>
</div>
...

我們把 email 設(shè)置為必填，然后使用內(nèi)建的模板驗(yàn)證器，通過(guò)正則表達(dá)式來(lái)檢查 email 的值：^[a-zA-Z0–9_.+-]+@[a-zA-Z0–9-]+.[a-zA-Z0–9-.]+$.

密碼和確認(rèn)密碼

需求：

密碼：必填，值必須與確認(rèn)密碼的值相同。
確認(rèn)密碼：必填，值必須與密碼的值相同。

<!-- app.component.html -->
...
<div>
 <label>Password</label>
 <input type="password" name="password" [ngModel]="user.password" 
  required #password="ngModel">
 <small [hidden]="password.valid || (password.pristine && !f.submitted)">
  Password is required
 </small>
</div>
<div>
 <label>Retype password</label>
 <input type="password" name="confirmPassword" [ngModel]="user.confirmPassword" 
  required validateEqual="password" #confirmPassword="ngModel">
 <small [hidden]="confirmPassword.valid || (confirmPassword.pristine && !f.submitted)">
  Password mismatch
 </small>
</div>
...

validateEqual 是我們自定義的驗(yàn)證器。它會(huì)將當(dāng)前輸入的值與輸入的密碼值進(jìn)行對(duì)比驗(yàn)證。

# 自定義確認(rèn)密碼驗(yàn)證器

我們將制定一個(gè) validate equal 指令。

// equal-validator.directive.ts
import { Directive, forwardRef, Attribute } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';
@Directive({
 selector: '[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]',
 providers: [
  { provide: NG_VALIDATORS, useExisting: forwardRef(() => EqualValidator), multi: true }
 ]
})
export class EqualValidator implements Validator {
 constructor( @Attribute('validateEqual') public validateEqual: string) {}
 validate(c: AbstractControl): { [key: string]: any } {
  // self value (e.g. retype password)
  let v = c.value;
  // control value (e.g. password)
  let e = c.root.get(this.validateEqual);
  // value not equal
  if (e && v !== e.value) return {
   validateEqual: false
  }
  return null;
 }
}

代碼很長(zhǎng)，讓我們把它拆開(kāi)一部分一部分地看。

申明指令

// equal-validator.directive.ts
@Directive({
 selector: '[validateEqual][formControlName],[validateEqual] 
 [formControl],[validateEqual][ngModel]',
 providers: [
  { provide: NG_VALIDATORS, useExisting: forwardRef(() => EqualValidator), multi: true }
 ]
})

首先，我們使用 @Directive 注解定義指令。然后我們指定 selector。selector 是必須的。我們會(huì)擴(kuò)展內(nèi)建驗(yàn)證器集合 NG_VALIDATORS 來(lái)將我們的等值驗(yàn)證器用于 providers.

// equal-validator.directive.ts
export class EqualValidator implements Validator {
 constructor( @Attribute('validateEqual') public validateEqual: string) {}
 validate(c: AbstractControl): { [key: string]: any } {}
}

我們的指令類必須實(shí)現(xiàn) Validator 接口。Validator 接口需要 avalidate 函數(shù)。在構(gòu)建函數(shù)中，我們通過(guò) @Attribute('validateEqual') 注解注入屬性值，并將其賦值給 validateEqual 變量。在我們的示例中， validateEqual 的值是 "password" 。

實(shí)現(xiàn)驗(yàn)證

// equal-validator.directive.ts
validate(c: AbstractControl): { [key: string]: any } {
 // 自己的值 (如 retype password)
 let v = c.value;
 // 控件的值 (如 password)
 let e = c.root.get(this.validateEqual);
 // 值不等旱
 if (e && v !== e.value) return {
  validateEqual: false
 }
 return null;
}

首先我們從輸入控件讀入值，賦給 v。然后我們?cè)诒韱沃姓业?password 控件的值賦值給 e。之后檢查值是否相等，如果不等就返回錯(cuò)。

# 在應(yīng)用模塊中導(dǎo)入自定義驗(yàn)證器

要使用自定義驗(yàn)證器，需要先將其導(dǎo)入到應(yīng)用程序模塊中。

// app.module.ts
...
import { EqualValidator } from './equal-validator.directive'; // 導(dǎo)入驗(yàn)證器
import { AppComponent } from './app.component';
@NgModule({
 imports:  [ BrowserModule, FormsModule ],
 declarations: [ AppComponent, EqualValidator ], // 導(dǎo)入到應(yīng)用模塊
 bootstrap: [ AppComponent ],
})
...

好了！假如你在 password 字段中輸入 "123"，在 retype password 字段中輸入"xyz"，就會(huì)顯示一個(gè)密碼不匹配的錯(cuò)誤。

# 看起來(lái)挺好，但是……

現(xiàn)在一切都挺好，直到你在 retype passowrd 中輸入文本之后又修改了 password 字段的值。

比如，你在 password 字段中輸入 "123"，在 retype password 字段中也輸入 "123"，然后將 password 字段的值改為 "1234" 。驗(yàn)證仍然通過(guò)。為什么？

因?yàn)槲覀冎话训戎凋?yàn)證器應(yīng)用到 retype password 字段。只有當(dāng) retype password 的值發(fā)生變化時(shí)才會(huì)觸發(fā)驗(yàn)證。

解決辦法

有幾種方法可以解決這個(gè)問(wèn)題。我們這里只討論其中一種，你自己可以去找到其它辦法。我們會(huì)再次使用 validateEqual 驗(yàn)證器并添加一個(gè) reverse 屬性。

<!-- app.component.html -->
...
<input type="password" class="form-control" name="password" 
 [ngModel]="user.password" 
 required validateEqual="confirmPassword" reverse="true">
<input type="password" class="form-control" name="confirmPassword" 
 [ngModel]="user.confirmPassword" 
 required validateEqual="password">
...

reverse 是 false 或者沒(méi)有設(shè)置的情況下，我們會(huì)像前一節(jié)提到的那樣執(zhí)行等值驗(yàn)證器。
reverse 是 true 的時(shí)候，我們?nèi)匀粫?huì)執(zhí)行等值驗(yàn)證器，但它不會(huì)為當(dāng)前控件添加錯(cuò)誤消息，而是為指定會(huì)把的目標(biāo)控件添加錯(cuò)誤消息。

在我們的例子中，我們?cè)O(shè)置 password 驗(yàn)證的 reverse 為 true。只要 password 與 retype password 的值不等，我們會(huì)為確證密碼字段添加一個(gè)錯(cuò)誤消息，而不是重置 password 字段。

完整的自定義驗(yàn)證器代碼如下：

// equal-validator.directive.ts
import { Directive, forwardRef, Attribute } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';
@Directive({
 selector: '[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]',
 providers: [
  { provide: NG_VALIDATORS, useExisting: forwardRef(() => EqualValidator), multi: true }
 ]
})
export class EqualValidator implements Validator {
 constructor(@Attribute('validateEqual') public validateEqual: string,
 @Attribute('reverse') public reverse: string) {
 }
 private get isReverse() {
  if (!this.reverse) return false;
  return this.reverse === 'true' ? true: false;
 }
 validate(c: AbstractControl): { [key: string]: any } {
  // self value
  let v = c.value;
  // control vlaue
  let e = c.root.get(this.validateEqual);
  // value not equal
  if (e && v !== e.value && !this.isReverse) {
   return {
    validateEqual: false
   }
  }
  // value equal and reverse
  if (e && v === e.value && this.isReverse) {
   delete e.errors['validateEqual'];
   if (!Object.keys(e.errors).length) e.setErrors(null);
  }
  // value not equal and reverse
  if (e && v !== e.value && this.isReverse) {
   e.setErrors({ validateEqual: false });
  }
  return null;
 }
}

當(dāng)然，還有其他方法也能解決密碼和確認(rèn)密碼驗(yàn)證問(wèn)題。有些人建議在組（ stack overflow ）中添加密碼和確認(rèn)密碼的機(jī)制，然后驗(yàn)證它。

方法沒(méi)有絕對(duì)的好與壞，適合自己的才是最好的。

以上所述是小編給大家介紹的在 Angular2 中實(shí)現(xiàn)自定義校驗(yàn)指令（確認(rèn)密碼）的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: