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

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

說(shuō)到表單，我認(rèn)為一個(gè)強(qiáng)大表單應(yīng)該包含下面3部分功能

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

2. 通過(guò)各種驗(yàn)證器驗(yàn)證表單元素輸入的數(shù)據(jù)是否合法，Angular 內(nèi)置了常用的驗(yàn)證器（required、pattern、email，min，max，minlength，maxlength）；

3. 驗(yàn)證后給予用戶(hù)反饋，比如驗(yàn)證不通過(guò)給予錯(cuò)誤的提示信息。

我覺(jué)得 Angular 的表單無(wú)疑是三大框架中最強(qiáng)大的，沒(méi)有之一，而且是官方原生提供支持和維護(hù)，提到 Angular 的表單肯定要說(shuō)下 Angular.js 的表單，其實(shí) Angular 的表單基本上繼承了 Angular.js 表單的所有功能，同時(shí)比 Angular.js 更強(qiáng)大，API 更友好。

那么 Angular 的表單和 Angular.js 相比到底有哪些改進(jìn)呢

1. 自定義 ngModel

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

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

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

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

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

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

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

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

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

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

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

6. 支持異步驗(yàn)證器

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

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

我們還需要讓驗(yàn)證錯(cuò)誤提示更加簡(jiǎn)單可擴(kuò)展

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

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

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

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

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

那么我們即使現(xiàn)在升級(jí)到了 Angular ，也面臨著錯(cuò)誤提示如何處理的問(wèn)題，當(dāng)然也有些類(lèi)庫(kù)處理了相關(guān)問(wèn)題，但是好像都沒(méi)有找到特別好用的。

1. UltimateAngular/ngx-errors 還是手寫(xiě)模版，只是簡(jiǎn)化了寫(xiě)法。

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

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

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

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

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