怎么優雅的使用Angular表單驗證

本篇內容主要講解“怎么優雅的使用Angular表單驗證”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么優雅的使用Angular表單驗證”吧!

說到表單，我認為一個強大表單應該包含下面3部分功能

1. 收集用戶輸入的表單數據，在 Angular 中通過 ngModel 語法糖實現雙向綁定非常方便；

2. 通過各種驗證器驗證表單元素輸入的數據是否合法，Angular 內置了常用的驗證器（required、pattern、email，min，max，minlength，maxlength）；

3. 驗證后給予用戶反饋，比如驗證不通過給予錯誤的提示信息。

我覺得 Angular 的表單無疑是三大框架中最強大的，沒有之一，而且是官方原生提供支持和維護，提到 Angular 的表單肯定要說下 Angular.js 的表單，其實 Angular 的表單基本上繼承了 Angular.js 表單的所有功能，同時比 Angular.js 更強大，API 更友好。

那么 Angular 的表單和 Angular.js 相比到底有哪些改進呢

1. 自定義 ngModel

在 Angular.js 中 ng-model 只能用于 input，select 等內置的 HTML 表單元素，如果是一個自定義的 select 框(div)，可能就無法使用自帶的 required 等驗證器了

但是可以通過猥瑣的方式處理，比如加一個隱藏的原生 HTML 表單元素，這個元素上綁定的 ng-model 和自定義的 select 框的 model 是一樣的，然后通過這個隱藏元素是否驗證通過去控制自定義 Select 的驗證樣式

那么在 Angular 中可以很方便讓任何自定義的組件使用 ngModel 和 內置的驗證器，只要你的自定義組件實現 ControlValueAccessor 接口，同時在組件的 providers 中加上 NG_VALUE_ACCESSOR 的 provider 即可，具體如何實現一個自定義的支持 ngModel 組件自行搜索下，官方文檔好像沒有找到相關介紹， 附一個 stackoverflow question

2. 結構型指令內部的表單元素自動識別

在 Angular.js 中如果有 ng-if 之類的動態指令，內部的表單元素不會自動追加到 Form 上，必須通過擴展一個自定義指令 ——dynamicFormControl —— 去手動追加到 ngForm 上，但是在 Angular 中不需要用戶自己去處理，只要元素被渲染，會自動附加到 ngForm Controls 中。

3. 響應式表單

Angular 中除了模板驅動表單外，還新增了 Angular - 響應式表單，讓用戶多了一份選擇，在某些復雜的場景下，響應式表單會更有優勢。

4. 動態表單支持更好

在 Angular 中不管是模板驅動表單還是響應式表單，對于動態創建表單的支持都很好，可以輕松的通過 [attr.name]="formName" 和 [name]="formName" 實現動態表單元素的創建。如果有復雜的驗證器，那么使用 響應式表單 會更好。

5. 模板驅動表單驗證器支持屬性綁定，動態控制是否需要驗證

如果一個表單元素（比如說用戶名）是否為必填不是確定的，而是動態設置的， 在 Angular 中可以通過屬性綁定 ——[required]="isRequired"—— 非常方便的控制，我看了下 Angular.js 的源碼現在也是支持的，不知道是我以前沒有發現呢還是之后的版本加上的功能。

6. 支持異步驗證器

如果要驗證用戶名輸入是否已經存在，就需要請求 API 遠程驗證，那么這個驗證就是一個異步的，如果驗證器不支持異步就會導致驗證結果沒有返回的時候就直接提交表單了。如果支持異步會更加的完善。

當然 Angular 的表單不僅僅只有上述功能，通過我們最近一段時間的使用來看， Angular 表單基本已經完美了，但是

我們還需要讓驗證錯誤提示更加簡單可擴展

回頭再看下開頭的介紹的表單應該包含下面3部分功能

1. 收集用戶的輸入的表單數據； 這個基本上 ngModel 雙向綁定的語法糖已經簡化的不能再簡化了，當然使用響應式表單連 ngModel 也可以不寫，這塊已經不需要開發者做任何事情了；

2. 內置的驗證器滿足大部分場景，但是還是會有很多常用的驗證器官方沒有提供，比如 重復驗證，遠程唯一性驗證等等，Nightapes/ngx-validators 和 gangachris/ng-validators 這2個第三方庫擴展了很多，即使不滿足自己擴展也很簡單；

3. 驗證后給予用戶反饋，驗證不通過給予錯誤的提示信息。對于這個錯誤提示信息，每個產品每個用戶都會有不一樣的需求，Angular 把可以做到的都做到了，都自動追加了 ng-invalid、ng-valid、ng-touched 等 class，還有就是哪些元素哪個驗證器驗證失敗都可以從 ngModel 和 ngForm 方便的獲取到，錯誤提示只能交給用戶自己去處理，如果你的系統僅僅只有樣式的反饋，那就更簡單了。

對于驗證錯誤提示，手動寫錯誤提示的模版會很啰嗦，寫模版本身也沒什么，怕就怕哪天設計師改需求了，原有的提示方式換了一個新的方式，那整個系統都需要挨個替換，有追求的程序員最怕的就是做重復沒有含量的工作，而且有時候還無法通過批量替換完成，所以在使用 Angular.js 1.x 的時候我就封裝了一個表單驗證庫 why520crazy/angular-w5c-validator，剛開始發布的時候功能比較簡單，后來有人提各種 Issue，逐漸改善，我覺得這個驗證庫對于很多人來說還是有幫助的，至少我覺得是更優雅的處理了各種錯誤提示，star 不多，但是證明了這個封裝還是有一定價值的。

那么我們即使現在升級到了 Angular ，也面臨著錯誤提示如何處理的問題，當然也有些類庫處理了相關問題，但是好像都沒有找到特別好用的。

1. UltimateAngular/ngx-errors 還是手寫模版，只是簡化了寫法。

2. NG-ZORRO/ng-zorro-antd 組件庫關于表單組件對錯誤驗證提示也做了很多工作，但是還是需要手寫模版配置。

既然沒有相關的類庫符合我們的需求，那么顯然就需要自己造輪子，所以我們去年在升級 Angular 時就按照我們的方式在組件庫的 Form 表單模塊加上了和 Angular.js why520crazy/angular-w5c-validator 類似的組件，得益于 Angular 框架的優秀，造起輪子特別簡單。

ngx-validator 已經可以開始使用了

所以這周我單獨抽離了表單驗證功能為一個獨立的類庫 why520crazy/ngx-validator , 如果你也在為表單驗證錯誤提示苦惱，也在尋找一種更優雅的錯誤處理方式，希望我的這個庫可以幫助到你或者給你一個啟發。

到此，相信大家對“怎么優雅的使用Angular表單驗證”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！