Angular动态表单生成(一)
好久不写博客了,手都生了,趁着最近老大让我研究动态表单生成的时机,撸一发博客~~
开源项目比较
老大丢给我了两个比较不错的开源的动态表单生成工具,这两个项目在github上的star数量基本持平:
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非常的强大,你能想到的东西基本上都有,甚至都考虑到了授权~~
劣势:
- 凡是强大的东西,都有一个共性,就是重,form.io是非常重的,想要把他吃透可不是一个简单的事情
- form.io基本上都是围绕bootstrap作为核心来生成表单的(各种样式之类的定义在formio项目中),不过应该是可以自己修改定义的
- 组件只有HTML的组件(或者说是bootstrap的组件),扩展起来并没有那么容易
- 基于javascript开发而不是typescript,这个算劣势吗?
ng-dynamic-forms
这个项目是原生就基于angular2开发的一个项目,支持原生HTML、bootstrap、foundation、ionic、kendo for angualr、material、primeng等Angular的UI框架,并支持数据验证。
优势:
- 这个组件相较于form.io,量级比较轻,源码也比较容易读懂,如果是想自己定制一些东西的话,会比较容易
- 对于第三方UI库支持比较好,方便与项目中的其他控件统一
劣势:
- 功能没有form.io强大,不过基本够用
- 组件较少,不过常用的基本都有,够用
- 布局和控件是分开的,用起来略有繁琐
- 对于第三方控件库的依赖比较强
西安.NET俱乐部群