easyFormGenerator, 创建不需要编码的神奇表单

分享于 

8分钟阅读

GitHub

  繁體 雙語
create amazing forms without coding : form editor based on angular formly
  • 源代码名称:easyFormGenerator
  • 源代码网址:http://www.github.com/MacKentoch/easyFormGenerator
  • easyFormGenerator源代码文档
  • easyFormGenerator源代码下载
  • Git URL:
    git://www.github.com/MacKentoch/easyFormGenerator.git
    Git Clone代码到本地:
    git clone http://www.github.com/MacKentoch/easyFormGenerator
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/MacKentoch/easyFormGenerator
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    简单格式生成器( AngularJS )

    npmGitHub versionJoin the chat at https://gitter.im/MacKentoch/easyFormGeneratorBower versionnpm versionFOSSA Status

    无需键入一行代码即可生成高级和唯一的boostrap表单 !

    这里是 简易表单生成器网站。

    是什么?

    Easy form generator ( 步进方式或者拖放方式):

      • ( 你可能不需要将"s"添加到minutes分钟) 中。
    • 注意:不要将窗体限制为单个列的template模板 template
      • ( 每行最多 3个控件)。
    • 生成的表单使用 Bootstrap
      • ( 目前最流行的前端框架)

    补充信息,更好地理解容易形成的形式生成器。

    简单表单生成器:Step

    重要: easyFormGenerator v2.1.1引入了修复 Angular formly升级兼容性问题的重大更改。 这里中断更改仅影响 header 控件。 header 控件字段模型现在需要 header 值为 templateOptions.placeholder ( 而不是在 templateOptions.description 中)。 为了帮助确保以前保存的字段模型使用了正确的属性,现在在 header 编辑模式( 因此,只需剪切/粘贴描述到 header 文本输入页面。) 中添加了描述输入。

    Step way version 是完成的最多稳定版本。

    • 跨浏览器 兼容
    • 响应( 不确定是否会使用很多,但你可以在你的智能手机上创建一个form版本的step。)。
    • 多语言支持
    • 友好的配置感谢单个提供商 easyFormSteWayConfig 提供程序
      • 启用/禁用模态动画
      • 启用/禁用控件( 例如:隐藏编辑器中的rtf )
      • 设置当前语言( 默认为英语)
      • 在编辑器中显示隐藏预览模型和/或者预览面板
    • 生产友好

    这里有一个尝试:容易为发电机收费的步骤为版本。

    • 在这里按英镑进行可视化预览的步骤: previewstepway.png

    简单表单生成器:拖放方式 ( 测试版)

    Drag and drop way version ( 目前测试版 ) 设计表单的乐趣和速度更快

    • 拖曳控制然后放下控制
    • 右键单击打开编辑面板

    拖放方式仍在开发中。

    Chrome 将为你提供拖放版本的最佳体验。 你可能会遇到与其他导航器意外的行为。

    这里有一个尝试:容易的发电机拖和下降方式。

    • 在这里拖放的可视化预览:previewdraganddropway

    轻松表单查看器: 生产就绪

    Easy form viewer 是一个帮助你使用创建的表单的指令

    • 保存表单时保存了 edaFieldsModel: 轻松表单生成器字段模型
    • 只要将它绑定到简单的表单查看器指令,它就会呈现( 没有所有不必要的装饰- 发电机只有用- ): preview

    :如何使用

    使用步进方式( 生产友好)

    检查演示:preview 目录中的 stepway.html

    安装

    安装easyFormGenerator将在一行中安装:

    • 步骤
    • 拖放方式
    • 表单查看器

    安装:

    npm install --save easy-form-generator

    或者

    yarn install easy-form-generator
    依赖项

    由于这些依赖关系,轻松表单生成器创建了令人惊奇的Bootstrap 表单:

    从分布式/供应商安装依赖 npm
    Bootstrap ( css/js )npm i --save bootstrap分布/供应商
    bootswatchnpm i --save bootswatch分布/供应商
    jQuerynpm i --save jquery分布/供应商
    Angular js (> = 1.3。x )npm i --save angular分布/供应商
    ngAnimatenpm i --save angular-animate分布/供应商
    角度转换npm i --save angular-translate分布/供应商
    angular-ui-bootstrapnpm i --save angular-ui-bootstrap分布/供应商
    textAngularnpm i --save textangular分布/供应商
    角带npm i --save angular-strap分布/供应商
    nya-bootstrap-selectnpm i --save @lordfriend/nya-bootstrap-select分布/供应商
    Angular 烤面包机npm i --save angularjs-toaster分布/供应商

    但是,它们不包括在包中,以避免应用程序中出现副作用/冲突。

    但是,要将它们包括在你的应用程序中,取决于你的开发流程。

    检查演示内容将会更多的话:

    在你的应用程序中插入简易表单生成器

    在你的应用程序中插入 eda.easyformGen.stepway:

    angular
    . module('YOUR_APP', [
     'eda.easyformGen.stepway'//injects easy form generator-step way ])
    仅由这个小的html生成所有简单的表单生成器:
    <eda-step-way-easy-form-gen></eda-step-way-easy-form-gen>
    要载入/保存模型?

    添加这些属性以与你自己的控制器交互:

    • eda-easy-form-generator-model: 绑定模型的属性
    • eda-save-form-event: 绑定窗体事件的属性
    <eda-step-way-easy-form-gen 
     eda-easy-form-generator-model="_MODEL_"eda-save-form-event="_SAVE_FUNCTION_">
    </eda-step-way-easy-form-gen>

    eda-easy-form-generator-model 属性为:

    字段名称字段格式字段描述
    formName字符串存储 form name,默认值为空字符串
    btnSubmitText字符串存储提交按钮名称,默认值为'提交"'
    btnCancelText字符串存储提交按钮名称,默认值为'cancel'
    edaFieldsModelarrayeasy form generator fields model 描述形式
    edaFieldsModelStringified字符串但是字符串字符串(,然后很容易将字段模型保存到任何数据库
    formlyFieldsModel对象angular formly fields model ( 由 edaFieldsModel 中的简易表单生成器填充)
    dataModel对象填写表单提要数据

    eda-save-form-event 函数:

    //your controller save function should have `edaEasyFormGeneratorModel` parameter//it will be filled by easy form generator modelsaveForm(edaEasyFormGeneratorModel)
    自定义 easyFormGenerator

    多语言支持:

    默认或者回退语言默认设置为 english

    语言键注释
    简体中文'en'
    法语'fr'
    德语'''
    日语'jp'
    西班牙语''es''thx给本杰明。英镑

    cod  for  form  表单  CODI