怎么優(yōu)雅的使用Angular表單驗證

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

成都創(chuàng)新互聯(lián)公司長期為超過千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為華州企業(yè)提供專業(yè)的成都網(wǎng)站制作、網(wǎng)站設(shè)計，華州網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

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

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

2. 通過各種驗證器驗證表單元素輸入的數(shù)據(jù)是否合法，Angular 內(nèi)置了常用的驗證器（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 等內(nèi)置的 HTML 表單元素，如果是一個自定義的 select 框(div)，可能就無法使用自帶的 required 等驗證器了

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

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

2. 結(jié)構(gòu)型指令內(nèi)部的表單元素自動識別

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

3. 響應(yīng)式表單

Angular 中除了模板驅(qū)動表單外，還新增了 Angular - 響應(yīng)式表單，讓用戶多了一份選擇，在某些復(fù)雜的場景下，響應(yīng)式表單會更有優(yōu)勢。

4. 動態(tài)表單支持更好

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

5. 模板驅(qū)動表單驗證器支持屬性綁定，動態(tài)控制是否需要驗證

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

6. 支持異步驗證器

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

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

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

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

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

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

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

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

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

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

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

既然沒有相關(guān)的類庫符合我們的需求，那么顯然就需要自己造輪子，所以我們?nèi)ツ暝谏?Angular 時就按照我們的方式在組件庫的 Form 表單模塊加上了和 Angular.js why520crazy/angular-w5c-validator 類似的組件，得益于 Angular 框架的優(yōu)秀，造起輪子特別簡單。

ngx-validator 已經(jīng)可以開始使用了

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

到此，相信大家對“怎么優(yōu)雅的使用Angular表單驗證”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

網(wǎng)站題目：怎么優(yōu)雅的使用Angular表單驗證
鏈接URL：http://muchs.cn/article46/gpjshg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站維護、品牌網(wǎng)站制作、動態(tài)網(wǎng)站、微信公眾號、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)