隨便說說，這一節(jié)可以跳過

去年參加 ngChine 2018 杭州開發(fā)者大會(huì)的時(shí)候記得有人問我： Worktile 是什么時(shí)候開始使用 Angular 的，我說是今年（2018年） 3 月份開始在新模塊中使用最新的 Angular 6，他說是不是有點(diǎn)晚了，我當(dāng)時(shí)愣了一下。其實(shí)仔細(xì)回想了一下， Angular 2.0 正式發(fā)布也就在 2016-09-14 號(hào)，所以也就晚了 1 年多一點(diǎn)點(diǎn)才開始使用而已嘛，再加上 2.0 到 4.0 的過渡或多或少還是有一點(diǎn)點(diǎn)坑的，不是很穩(wěn)定，此時(shí)投入不是特別合適，雖然升級(jí)簡單，但是還是有很多概念和API需要重新學(xué)習(xí)，比如 HttpClient，路由等等（在 2.0 的時(shí)候我們是有嘗試在邊緣的一個(gè) Open API Doc 文檔站點(diǎn)使用過的，我們一直在關(guān)注著最新的 Angular）

所以我覺得 4.0 （也就是 2017-03）之后的 Angular 才真真正正的開始趨于穩(wěn)定，可以開始嘗試學(xué)習(xí)和使用，再加上經(jīng)過了 1 年多的社區(qū)實(shí)踐，踩坑，基礎(chǔ)生態(tài)建設(shè)，我覺得今年（2018年）才是企業(yè)大規(guī)模嘗試使用 Angular 最佳時(shí)間點(diǎn)，再加上 Angular CLI 以及 @angular/cdk的逐漸強(qiáng)大， 我想說這是一個(gè)最好的時(shí)代。

另外還有一個(gè)原因是 2016 - 2017 年屬于我司最艱難的困難時(shí)期，壓根沒有心思考慮切換最新技術(shù)棧，所以那 2 年基本上屬于埋頭做業(yè)務(wù)。

現(xiàn)在回過頭來看 Angular ，在前端框架高速發(fā)展的那幾年，因?yàn)檎桨姘l(fā)布遲遲延期，導(dǎo)致市場被后起之秀 React， Vue 等優(yōu)秀框架占有，好在新的 Angular 足夠優(yōu)秀，足夠前瞻，值得花更多的時(shí)間投入學(xué)習(xí)和使用，現(xiàn)在還不算晚。所以慢有一定道理的，因?yàn)樾枰裼褡?#xff0c;衡量未來的趨勢等等，但是從完美支持 TypeScript，RxJS 這 2 點(diǎn)來說，Angular 的確走在了前面。

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

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

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

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

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

另外說下本文不是普及 Angular Form 表單的基本知識(shí)的，如果有不了解的可以看 [angular forms guide](Angular - Angular 表單檢測) ，因?yàn)楣俜轿臋n已經(jīng)寫的特別好了。

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

1. 自定義 ngModel

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

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

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

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

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

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

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

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

在 Angular 中不管是模板驅(qū)動(dòng)表單還是響應(yīng)式表單，對(duì)于動(dòng)態(tài)創(chuàng)建表單的支持都很好，可以輕松的通過 [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è)表單元素（比如說用戶名）是否為必填不是確定的，而是動(dòng)態(tài)設(shè)置的， 在 Angular 中可以通過屬性綁定 `[required]="isRequired"` 非常方便的控制，我看了下 Angular.js 的源碼現(xiàn)在也是支持的，不知道是我以前沒有發(fā)現(xiàn)呢還是之后的版本加上的功能。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ngx-validator Demo 示例，點(diǎn)擊直接查看演示

最后的最后感謝你耐心閱讀到此，這篇博客已經(jīng)計(jì)劃了 3 個(gè)多月了，因?yàn)楣ぷ鞣泵σ恢睕]有時(shí)間，這周末下了一個(gè)狠心，必須完成！已經(jīng)被兒子打擾多次，還有就是 ngx-validator 目前基本的功能已經(jīng)完成，后期還有很多增強(qiáng)的驗(yàn)證器，測試需要補(bǔ)充，還不是特別完善，歡迎大家提寶貴意見！ 開源真不容易，這么簡單的一個(gè)功能花了我周末2天時(shí)間寫示例，文檔，反復(fù)修改 API，然后用蹩腳的英文寫了 Readme。

https://github.com/why520crazy/ngx-validator?github.com

文章來源于 Worktile 博客解讀，想了解更多關(guān)于企業(yè)協(xié)作內(nèi)容可前往查看。

插個(gè)廣告，Worktile 2019 年招 Angular 前端工程師 和 Node.js 服務(wù)端工程師，歡迎大家加入！

Node.js高級(jí)工程師招聘-Worktile招聘-拉勾網(wǎng)?www.lagou.comAngular 前端工程師招聘-Worktile招聘-拉勾網(wǎng)?www.lagou.com

總結(jié)

以上是生活随笔為你收集整理的angular js创建表单_如何优雅的使用 Angular 表单验证的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。