Angular動態表單生成(一)


好久不寫博客了,手都生了,趁着最近老大讓我研究動態表單生成的時機,擼一發博客~~

開源項目比較

老大丟給我了兩個比較不錯的開源的動態表單生成工具,這兩個項目在github上的star數量基本持平:

https://form.io/#/

https://github.com/udos86/ng-dynamic-forms

form.io

其中from.io本身是一個商業項目,只是開源了其中動態表單生成的部分。他的功能有點強大,從官方簡介的視頻來看看,支持拖拽、驗證、設置各種默認值等等,商業版本甚至可以支持數據的動態存儲。想要研究它,需要了解三個開源項目:

https://github.com/formio/formio.git

https://github.com/formio/formio.js.git

https://github.com/formio/angular-formio.git

其中formio這個項目里面是一些邊緣化的東西,我沒有深究,formio.js這個項目是整個項目的核心,他里面有各種組件的封裝,各種拖拽效果等等,剩下一個angular-formio其實就是給formio.js包了一層angular的皮。

優勢:

form.io非常的強大,你能想到的東西基本上都有,甚至都考慮到了授權~~

劣勢:

  1. 凡是強大的東西,都有一個共性,就是重,form.io是非常重的,想要把他吃透可不是一個簡單的事情
  2. form.io基本上都是圍繞bootstrap作為核心來生成表單的(各種樣式之類的定義在formio項目中),不過應該是可以自己修改定義的
  3. 組件只有HTML的組件(或者說是bootstrap的組件),擴展起來並沒有那么容易
  4. 基於javascript開發而不是typescript,這個算劣勢嗎?

ng-dynamic-forms

這個項目是原生就基於angular2開發的一個項目,支持原生HTML、bootstrap、foundation、ionic、kendo for angualr、material、primeng等Angular的UI框架,並支持數據驗證。

優勢:

  1. 這個組件相較於form.io,量級比較輕,源碼也比較容易讀懂,如果是想自己定制一些東西的話,會比較容易
  2. 對於第三方UI庫支持比較好,方便與項目中的其他控件統一

劣勢:

  1. 功能沒有form.io強大,不過基本夠用
  2. 組件較少,不過常用的基本都有,夠用
  3. 布局和控件是分開的,用起來略有繁瑣
  4. 對於第三方控件庫的依賴比較強


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM