強大的 Angular 表單驗證

Angular 支持非常強大的內(nèi)置表單驗證，maxlength、minlength、required 以及 pattern。使用 Angular 的內(nèi)置表單校驗?zāi)軌蛲瓿山^大多數(shù)的業(yè)務(wù)場景的校驗需求，但有時我們還需要實現(xiàn)更為復(fù)雜的表單校驗功能，這時可以使用 Angular 提供的表單自定義校驗（Custom Validator）。下面，我們就來了解一下如何使用 Angular 的自定義表單校驗

效果圖：

QQ截圖20170428193800.png
  1. 首先，來創(chuàng)建我們的注冊組件（register），并在模版中顯示一個簡單的表單
  <h3 class="text-center">注冊</h3>

  <form>

    <div class="form-group">
      <label for="username">用戶名：</label>
      <input type="text" id="username" class="form-control" >
    </div>

  </form>

為了使表單看上去能夠漂亮一些，在 index.html 中引入 bootstrap 樣式文件：

<link rel="stylesheet"  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  1. 接下來確定我們的驗證需求：
    我們希望用戶名只能包含數(shù)字、字母和下劃線，且不能以下劃線開頭
  • 首先為 form 標簽添加 formGroup 指令：
<form [formGroup]="registerForm" >
  • 并且為 input 標簽添加 formControlName 指令：
<input formControlName="username" type="text" 
        id="username" class="form-control" >
  1. 在代碼中定義驗證規(guī)則：
    從內(nèi)置表單模塊中導(dǎo)入以下類：
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';

其中：
1. formBuilder 用來構(gòu)建表單數(shù)據(jù)
2. formGroup 表示表單類型
3. Validators 包含了表單內(nèi)置的驗證規(guī)則，如： Validators.required
定義表單屬性

registerForm: FormGroup;

定義表單驗證不通過時每一項顯示的錯誤消息（目前我們只有 username ）

    formErrors = {
      username: ''
    };

為每一項驗證規(guī)則定義驗證失敗時的說明文字（表單控件可能有多條驗證規(guī)則，由不通過的驗證說明構(gòu)成一條錯誤消息）

    validationMessage = {
      'username': {
        'minlength': '用戶名長度最少為3個字符',
        'maxlength': '用戶名長度最多為10個字符',
        'required': '請?zhí)顚懹脩裘?
      }
    };

在構(gòu)造函數(shù)中添加 fb 屬性用來構(gòu)建表單

constructor(private fb: FormBuilder) { }

添加構(gòu)建表單的方法

    buildForm(): void {
    // 通過 formBuilder構(gòu)建表單
    this.registerForm = this.fb.group({
      /* 為 username 添加3項驗證規(guī)則：
       * 1.必填， 2.最大長度為10， 3.最小長度為3
       * 其中第一個空字符串參數(shù)為表單的默認值
      */
      'username': [ '', [
        Validators.required,
        Validators.maxLength(10),
        Validators.minLength(3)
      ]]
    });

接下來我們添加一個方法用來更新錯誤信息

    onValueChanged(data?: any) {
      // 如果表單不存在則返回
      if (!this.registerForm) return;
      // 獲取當前的表單
      const form = this.registerForm;

      // 遍歷錯誤消息對象
      for (const field in this.formErrors) {
        // 清空當前的錯誤消息
        this.formErrors[field] = '';
        // 獲取當前表單的控件
        const control = form.get(field);

        // 當前表單存在此空間控件 && 此控件沒有被修改 && 此控件驗證不通過
        if (control && control.dirty && !control.valid) {
          // 獲取驗證不通過的控件名，為了獲取更詳細的不通過信息
          const messages = this.validationMessage[field];
          // 遍歷當前控件的錯誤對象，獲取到驗證不通過的屬性
          for (const key in control.errors) {
            // 把所有驗證不通過項的說明文字拼接成錯誤消息
            this.formErrors[field] += messages[key] + '\n';
          }
        }
      }
    }

下面只需要在表單構(gòu)建結(jié)束后初始化錯誤消息，并且在每次表單數(shù)據(jù)更改時更新錯誤消息就可以了
在 buildForm 方法中添加如下代碼

    // 每次表單數(shù)據(jù)發(fā)生變化的時候更新錯誤信息
    this.registerForm.valueChanges
      .subscribe(data => this.onValueChanged(data));

    // 初始化錯誤信息
    this.onValueChanged();

此時，我們已經(jīng)很好的控制了錯誤信息，下面只需要在表單模版中添加錯誤信息的顯示就可以了
在 input 標簽下方添加如下代碼：

    <div *ngIf="formErrors.username" 
      class="showerr alert alert-danger" >{{ formErrors.username }}</div>

添加如下代碼到表單模版的 css 中：

    form {
      width: 90%;
      max-width: 45em;
      margin: auto;
    }

    .showerr {
      white-space: pre-wrap;
    }

現(xiàn)在我們就可以嘗試運行了，在代碼不報錯的情況下已經(jīng)能夠看到非常好的效果了
如果代碼報錯或沒有出現(xiàn)想象中的效果則可以參照本文結(jié)尾的完整代碼進行修改

  1. 雖然我們已經(jīng)搭建了整個布局，但是還沒有實現(xiàn)我們的最終目的：實現(xiàn)自定義的表單驗證
    接下來我們創(chuàng)建一個正則驗證器，新建文件 validate-register.ts :
    import { ValidatorFn, AbstractControl } from '@angular/forms';

    export function validateRex(type: string, validateRex: RegExp): ValidatorFn {
      return (control: AbstractControl): {[key: string]: any} => {
        // 獲取當前控件的內(nèi)容
        const str = control.value;
        // 設(shè)置我們自定義的驗證類型
        const res = {};
        res[type] = {str}
        // 如果驗證通過則返回 null 否則返回一個對象（包含我們自定義的屬性）
        return validateRex.test(str) ? null : res;
      }
    }

下面我們在代碼中導(dǎo)入此函數(shù)：

import { validateRex } from './validate-register';

修改 validationMessage 屬性為：

    // 為每一項表單驗證添加說明文字
    validationMessage = {
      'username': {
        'minlength': '用戶名長度最少為3個字符',
        'maxlength': '用戶名長度最多為10個字符',
        'required': '請?zhí)顚懹脩裘?,
        'notdown': '用戶名不能以下劃線開頭',
        'only': '用戶名只能包含數(shù)字、字母、下劃線'
      }
    };

修改 buildForm 方法：

    // 通過 formBuilder構(gòu)建表單
    this.registerForm = this.fb.group({
      /* 為 username 添加 5 項驗證規(guī)則：
       * 1.必填， 2.最大長度為10， 3.最小長度為3， 4.不能以下劃線開頭， 5.只能包含數(shù)字、字母、下劃線
       * 其中第一個空字符串參數(shù)為表單的默認值
      */
      'username': [ '', [
        Validators.required,
        Validators.maxLength(10),
        Validators.minLength(3),
        validateRex('notdown', /^(?!_)/),
        validateRex('only', /^[1-9a-zA-Z_]+$/)
      ]]
    });

OK ! 大功告成了，趕緊運行代碼嘗試一下吧，我們可以隨時添加各種驗證規(guī)則，只需要修改 validationMessage 屬性和 buildForm 方法即可！
如果添加多個表單控件的話還需要修改 formErrors，例如添加 password 控件則修改 formErrors 為

formErrors = {
    username: '',
    password: ''
  };

大家可自行嘗試一下！

  1. 完整代碼：
    register.component.html:
    <h3 class="text-center">注冊</h3>

    <form [formGroup]="registerForm" >

      <div class="form-group">
        <label for="username">用戶名：</label>

        <input formControlName="username"
          type="text" id="username" #username
          class="form-control" >
        <div *ngIf="formErrors.username" class="showerr alert alert-danger" >{{ formErrors.username }}</div>
      </div>

    </form>
    ```

    register.component.css:
    ```
    form {
      width: 90%;
      max-width: 45em;
      margin: auto;
    }

    .showerr {
      white-space: pre-wrap;
    }
    ```

    register.component.ts:
    ```
    import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    import { validateRex } from './validate-register';

    @Component({
      selector: 'app-register',
      templateUrl: './register.component.html',
      styleUrls: ['./register.component.css']
    })
    export class RegisterComponent implements OnInit {

      // 定義表單
      registerForm: FormGroup;

      // 表單驗證不通過時顯示的錯誤消息
      formErrors = {
        username: ''
      };

      // 為每一項表單驗證添加說明文字
      validationMessage = {
        'username': {
          'minlength': '用戶名長度最少為3個字符',
          'maxlength': '用戶名長度最多為10個字符',
          'required': '請?zhí)顚懹脩裘?,
          'notdown': '用戶名不能以下劃線開頭',
          'only': '用戶名只能包含數(shù)字、字母、下劃線'
        }
      };

      // 添加 fb 屬性，用來創(chuàng)建表單
      constructor(private fb: FormBuilder) { }

      ngOnInit() {
        // 初始化時構(gòu)建表單
        this.buildForm();
      }

      // 構(gòu)建表單方法
      buildForm(): void {
        // 通過 formBuilder構(gòu)建表單
        this.registerForm = this.fb.group({
          /* 為 username 添加3項驗證規(guī)則：
           * 1.必填， 2.最大長度為10， 3.最小長度為3， 4.不能以下劃線開頭， 5.只能包含數(shù)字、字母、下劃線
           * 其中第一個空字符串參數(shù)為表單的默認值
          */
          'username': [ '', [
            Validators.required,
            Validators.maxLength(10),
            Validators.minLength(3),
            validateRex('notdown', /^(?!_)/),
            validateRex('only', /^[1-9a-zA-Z_]+$/)
          ]]
        });

        // 每次表單數(shù)據(jù)發(fā)生變化的時候更新錯誤信息
        this.registerForm.valueChanges
          .subscribe(data => this.onValueChanged(data));

        // 初始化錯誤信息
        this.onValueChanged();
      }

      // 每次數(shù)據(jù)發(fā)生改變時觸發(fā)此方法
      onValueChanged(data?: any) {
        // 如果表單不存在則返回
        if (!this.registerForm) return;
        // 獲取當前的表單
        const form = this.registerForm;

        // 遍歷錯誤消息對象
        for (const field in this.formErrors) {
          // 清空當前的錯誤消息
          this.formErrors[field] = '';
          // 獲取當前表單的控件
          const control = form.get(field);

          // 當前表單存在此空間控件 && 此控件沒有被修改 && 此控件驗證不通過
          if (control && control.dirty && !control.valid) {
            // 獲取驗證不通過的控件名，為了獲取更詳細的不通過信息
            const messages = this.validationMessage[field];
            // 遍歷當前控件的錯誤對象，獲取到驗證不通過的屬性
            for (const key in control.errors) {
              // 把所有驗證不通過項的說明文字拼接成錯誤消息
              this.formErrors[field] += messages[key] + '\n';
            }
          }
        }
      }

    }

validate-register.ts:

    import { ValidatorFn, AbstractControl } from '@angular/forms';

    export function validateRex(type: string, validateRex: RegExp): ValidatorFn {
      return (control: AbstractControl): {[key: string]: any} => {
        // 獲取當前控件的內(nèi)容
        const str = control.value;
        // 設(shè)置我們自定義的嚴重類型
        const res = {};
        res[type] = {str}
        // 如果驗證通過則返回 null 否則返回一個對象（包含我們自定義的屬性）
        return validateRex.test(str) ? null : res;
      }
    }

本文結(jié)束，感謝閱讀！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 134,981評論 19贊 139
  • HTML表單 在HTML中，表單是 ... 之間元素的集合，它們允許訪問者輸入文本、選擇選項、操作對象等等，然后將...
    蘭山小亭閱讀 3,443評論 2贊 14
  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品，去做同樣的事情，實現(xiàn)同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 7,842評論 2贊 17
  • 細說 Angular 2+ 的表單（一）：模板驅(qū)動型表單 響應(yīng)式表單 響應(yīng)式表單乍一看還是很像模板驅(qū)動型表單的，但...
    接灰的電子產(chǎn)品閱讀 3,408評論 5贊 22
  • 動態(tài)表單（React Forms）是一種動態(tài)構(gòu)建表單的技術(shù)，用于解決有時候手動編寫和維護表單所需工作量和時間會過大...
    阿貍不歌閱讀 7,772評論 0贊 2