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. 对于第三方控件库的依赖比较强
原文地址:https://www.cnblogs.com/baiyunchen/p/8469155.html