好久不写博客了,手都生了,趁着最近老大让我研究动态表单生成的时机,撸一发博客~~

开源项目比较

老大丢给我了两个比较不错的开源的动态表单生成工具,这两个项目在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. 对于第三方控件库的依赖比较强

Angular动态表单生成(一)的更多相关文章

  1. Angular动态表单生成(八)

    动态表单生成之拖拽生成表单(下) 我们的动态表单,最终要实现的效果与Form.io的在线生成表单的效果类似,可以参考它的demo地址:https://codepen.io/travist/full/x ...

  2. Angular动态表单生成(七)

    动态表单生成之拖拽生成表单(上) 这个功能就比较吊炸天了,之前的六篇,都是ng-dynamic-forms自带的功能,可能很多的说明官方的文档都已经写了,我只是个搬运工,而在这篇文章中,我将化身一个工 ...

  3. Angular动态表单生成(五)

    动态表单生成之布局 到上面的篇章为止,我们已经把表单比较完整的生成出来了,也实现了一些验证功能,可以说,我们截止这里,就已经可以满足我们的大部分表单生成需求了~ 但是: 目前来说,我们对于表单的布局只 ...

  4. Angular动态表单生成(六)

    动态表单之根据Json生成表单 我们在实际的使用中,动态表单往往是由服务器端的一系列配置,然后返回数据给客户端,最后客户端根据数据来动态的生成表单.那么怎么像我们上面所描述的这样,生成一个可以让我们的 ...

  5. Angular动态表单生成(二)

    ng-dynamic-forms源码分析 在两个开源项目中,ng-dynamic-forms的源码相较于form.io,比较简单,所以我还勉强能看懂,下面就我自己的理解进行简单分析,若有不对的地方,请 ...

  6. Angular动态表单生成(三)

    ng-dynamic-forms实践篇(上) 定个小目标 先来定个小目标吧,我们要实现的效果: 动态生成一个表单,里面的字段如下: 字段名称 字段类型 验证 备注 姓名 text 必填,长度小于15 ...

  7. Angular动态表单生成(四)

    ng-dynamic-forms实践篇(下) 我们接着上篇,先把小目标中的所有字段都定义出来 这部分就是苦力活儿了,把KendoUiComponent中的formModel完善即可: formMode ...

  8. form-create 3.0 版本发布,好用的Vue3版本动态表单生成组件

    form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成组件.支持2个UI框架,并且支持生成任何 Vue 组件.内置20种常用表单组件和自定义组件,再复杂 ...

  9. Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)

    Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...

随机推荐

  1. css的一些基础(一)

    定位 定位相关属性用于设置目标组件的位置,常用的定位相关属性如下. 属性 说明 值 position 设置定位方法 static.relative.absolute.fixed left     ri ...

  2. MySQL Metadata

    http://www.devart.com/dotconnect/mysql/docs/MetaData.html In this overload first parameter is name o ...

  3. 【源代码R3】移植一份LARGE_INTEGER转时间的代码

    本代码来自ReactOS-0.4.0\lib\rtl\time.c中的函数RtlTimeToTimeFields(IN PLARGE_INTEGER Time, OUT PTIME_FIELDS Ti ...

  4. js 判断 复选框全选、全不选、反选、必选一个

    一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...

  5. Tinker + Bugly + Jenkins 爬坑之路

    前阵子 Android 端的线上崩溃比较多,热修复被提上日程.实现方案是 Tinker,Jenkins 打包,最后补丁包上传到 Bugly 进行分发.主要在 Jenkins 打包这一块爬了不少坑,现记 ...

  6. JS的排序算法

    排序是最基本的算法(本文排序为升序Ascending),常见的有以下几种: 1.冒泡排序 Bubble Sort 2.选择排序 Selection Sort 3.插入排序 Insertion Sort ...

  7. spring单元测试报错:Failed to load ApplicationContext 的解决方法

    使用idea 配置单元测试之后,配置完spring的注解@junit 和@runer 之后 一直报错. 最后发现是默认使用jdk1.8引起的,使用jdk1.7即可.

  8. XSS防范之Encode(转)

    防范XSS有三道防火墙:数据的输入校验,数据输出Encode,浏览器安全(主要就是CSP),这里主要介绍Encode. #用于XSS防范的Encode 用户防范XSS的Encode主要有三种:Html ...

  9. web前端与后端的理解区分

    要了解web前后端的区别,首先必须得清楚什么是web前端和web后端. 首先:web的本意是蜘蛛网和网的意思,在网页设计中我们称为网页的意思.现广泛译作网络.互联网等技术领域.表现为三种形式,即超文本 ...

  10. MySQL复制报错(Slave failed to initialize relay log info structure from the repository)

    机器重启以后,主从出现了问题,具体报错信息: Slave failed to initialize relay log info structure from the repository 解决方案: ...