{"id":14973177,"url":"https://github.com/mackentoch/easyformgenerator","last_synced_at":"2025-04-05T03:06:36.398Z","repository":{"id":34143392,"uuid":"37979508","full_name":"MacKentoch/easyFormGenerator","owner":"MacKentoch","description":"create amazing forms without coding : form editor based on angular formly ","archived":false,"fork":false,"pushed_at":"2021-03-10T11:59:19.000Z","size":23826,"stargazers_count":253,"open_issues_count":23,"forks_count":111,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-04-05T03:06:00.774Z","etag":null,"topics":["angularjs","es6","webpack"],"latest_commit_sha":null,"homepage":"http://mackentoch.github.io/easyFormGenerator/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MacKentoch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-06-24T11:01:32.000Z","updated_at":"2025-03-07T01:01:40.000Z","dependencies_parsed_at":"2022-08-28T20:50:14.377Z","dependency_job_id":null,"html_url":"https://github.com/MacKentoch/easyFormGenerator","commit_stats":null,"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MacKentoch%2FeasyFormGenerator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MacKentoch%2FeasyFormGenerator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MacKentoch%2FeasyFormGenerator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MacKentoch%2FeasyFormGenerator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MacKentoch","download_url":"https://codeload.github.com/MacKentoch/easyFormGenerator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247280263,"owners_count":20912967,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angularjs","es6","webpack"],"created_at":"2024-09-24T13:48:16.627Z","updated_at":"2025-04-05T03:06:36.374Z","avatar_url":"https://github.com/MacKentoch.png","language":"JavaScript","funding_links":["https://www.paypal.me/ErwanDatin/"],"categories":[],"sub_categories":[],"readme":"# Easy form generator (AngularJS)\n\n[![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](https://github.com/MacKentoch/easyFormGenerator)\n[![GitHub version](https://badge.fury.io/gh/MacKentoch%2FeasyFormGenerator.svg)](https://badge.fury.io/gh/MacKentoch%2FeasyFormGenerator)\n[![Join the chat at https://gitter.im/MacKentoch/easyFormGenerator](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/MacKentoch/easyFormGenerator?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n[![Bower version](https://badge.fury.io/bo/easy-form-generator.svg)](https://badge.fury.io/bo/easy-form-generator)\n[![npm version](https://badge.fury.io/js/easy-form-generator.svg)](https://badge.fury.io/js/easy-form-generator)\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FMacKentoch%2FeasyFormGenerator.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2FMacKentoch%2FeasyFormGenerator?ref=badge_shield)\n\n\u003e Generate advanced and unique boostrap forms without typing a single line of code!\n\n#### [— easy form generator website here —](http://mackentoch.github.io/easyFormGenerator/)\n\n## What is it?\n\n_`Easy form generator` (step way or drag and drop way):_\n\n- Create forms _in a matter of minutes_ :hourglass:\n  - (_you may not need to add \"s\" to minutes_).\n- _Don't limit_ your form _to a single column_ template\n  - (up to 3 controls per line).\n- generated forms _use bootstrap_\n  - (until now the most popular front end framework)\n- based on amazing and :sparkles: [angular formly](https://github.com/formly-js/angular-formly)\n  - (see angular [formly website](http://angular-formly.com) and [documentation](http://docs.angular-formly.com) then you'll understand the :sparkles: behind)\n\n[Complementary information to better understand easy form generator](https://github.com/MacKentoch/easyFormGenerator/blob/master/README_TOO.md)\n\n### Easy Form Generator: **Step way**\n\n\u003e **IMPORTANT:** easyFormGenerator v2.1.1 introduced a breaking change to fix angular formly upgrade compatibility issue.\n\u003e This breaking change impacts Header control only.\n\u003e Header control field model now needs header value to be in `templateOptions.placeholder` (rather than in `templateOptions.description`).\n\u003e To help to ensure the right property is used by your previously saved fields model, description input is now added in Header edit modal (_so just cut / paste description into header text input_).\n\n`Step way version` is the **most accomplished** and **stable version**.\n\n- cross browser compatible\n- responsive (_not sure it will be used a lot but you could create a form on your smartphone with the step way version_).\n- multi-language support\n- friendly configurable thanks to a single provider `easyFormSteWayConfig` provider\n  - enable / disable modal animation\n  - enable / disable controls (ex: hide rich text from editor)\n  - set current language (default is english)\n  - show hide preview model and / or preview panel in editor\n- production friendly\n\nHave a try here: [Easy for generator **step way** version](https://cdn.rawgit.com/MacKentoch/easyFormGenerator/v2.0.0/preview/stepway.html#)\n\n- **Step way visual preview here**:\n  ![previewstepway.png](https://raw.githubusercontent.com/MacKentoch/easyFormGenerator/master/images/preview.png)\n\n---\n\n### Easy Form Generator: **drag and drop way** (BETA)\n\n`Drag and drop way version` (**currently in BETA**) is more fun and faster to design a form\n\n- drag control then drop control\n- right click to open edit panel\n\nDrag and drop way is still in development.\n\n\u003e `Chrome` will give you the best experience with drag and drop version. You may encounter unexpected behaviours with other navigators.\n\nhave a try here: [Easy for generator **drag and drop way** version](https://cdn.rawgit.com/MacKentoch/easyFormGenerator/v2.0.0/preview/dragDropWay.html)\n\n- **Drag and drop way visual preview here**:\n  ![previewdraganddropway](https://cdn.rawgit.com/MacKentoch/easyFormGenerator/master/images/dragdropway_preview.png)\n\n---\n\n### Easy form viewer: production ready\n\n`Easy form viewer` is a directive which helps you using your created forms\n\n- when you saved your form you saved `edaFieldsModel`: easy form generator fields model\n- just bind it to easy form viewer directive, then it will render (_without all unecessary decoration — generator useful only —_):\n  ![preview](https://cdn.rawgit.com/MacKentoch/easyFormGenerator/master/images/easyFormViewerPreview.png)\n\n---\n\n## How to use?\n\n---\n\n### Using Step way version (production friendly)\n\n\u003e Check demo: [`stepway.html` in `preview` directory](https://github.com/MacKentoch/easyFormGenerator/blob/master/preview/stepway.html)\n\n#### Install\n\nInstalling easyFormGenerator will install in a row:\n\n- step way\n- drag and drop way\n- form viewer\n\n_Install:_\n\n```bash\nnpm install --save easy-form-generator\n```\n\nor\n\n```bash\nyarn install easy-form-generator\n```\n\n#### dependencies\n\nEasy form generator creates amazing bootstrap forms thanks to these dependencies:\n\n| dependency            | npm install                                     | from dist/vendors                                                                        |\n| :-------------------- | :---------------------------------------------- | :--------------------------------------------------------------------------------------- |\n| bootstrap (css / js)  | `npm i --save bootstrap`                        | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| bootswatch            | `npm i --save bootswatch`                       | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| jquery                | `npm i --save jquery`                           | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| angular js (\u003e= 1.3.X) | `npm i --save angular`                          | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| ngAnimate             | `npm i --save angular-animate`                  | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| angular-translate     | `npm i --save angular-translate`                | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| angular-ui-bootstrap  | `npm i --save angular-ui-bootstrap`             | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| textAngular           | `npm i --save textangular`                      | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| angular-strap         | `npm i --save angular-strap`                    | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| nya-bootstrap-select  | `npm i --save @lordfriend/nya-bootstrap-select` | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| angular toaster       | `npm i --save angularjs-toaster`                | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n\n_They are not include in easyFormGenerator bundle to avoid side effects / collisions in your application._\n\n_It is up to you to include them in your application depending on your dev workflow._\n\n\u003e It will be far more talkative be checking demo:\n\n- [`stepway.html` in `preview` directory](https://github.com/MacKentoch/easyFormGenerator/blob/master/preview/stepway.html)\n- **OR** this [project example](https://github.com/MacKentoch/easy-form-generator-webpack-example) (_ES6+ and webpack based_)\n\n#### Inject easy form generator in your app\n\nJust inject `eda.easyformGen.stepway` in you application:\n\n```javascript\nangular.module(\"YOUR_APP\", [\n  \"eda.easyformGen.stepway\" //injects easy form generator-step way\n]);\n```\n\n#### All easy form generator just by this small html:\n\n```html\n\u003ceda-step-way-easy-form-gen\u003e\u003c/eda-step-way-easy-form-gen\u003e\n```\n\n#### Want to Load/save models?\n\nAdd these attributes to interact with your own controller:\n\n- `eda-easy-form-generator-model`: attribute to bind your model\n- `eda-save-form-event`: attribute to bind save form event\n\n```html\n\u003ceda-step-way-easy-form-gen\n      eda-easy-form-generator-model=\"_MODEL_\"\n      eda-save-form-event=\"_SAVE_FUNCTION_\"\u003e\n\u003c/eda-step-way-easy-form-gen\u003e\n```\n\n**`eda-easy-form-generator-model` properties are**:\n\n| field name                  | field format | field description                                                                   |\n| :-------------------------- | :----------- | :---------------------------------------------------------------------------------- |\n| `formName`                  | string       | stores `form name`, default is empty string                                         |\n| `btnSubmitText`             | string       | stores submit button name, default is 'Submit'                                      |\n| `btnCancelText`             | string       | stores submit button name, default is 'Cancel'                                      |\n| `edaFieldsModel`            | array        | `easy form generator fields model` that describe form                               |\n| `edaFieldsModelStringified` | string       | edaFieldsModel but stringified (_then easy to save fields model to any database_)   |\n| `formlyFieldsModel`         | object       | `angular formly fields model` (filled by easy form generator from `edaFieldsModel`) |\n| `dataModel`                 | object       | filling the form feeds dataModel                                                    |\n\n**`eda-save-form-event` function**:\n\n```javascript\n//your controller save function should have `edaEasyFormGeneratorModel` parameter\n//it will be filled by easy form generator model\nsaveForm(edaEasyFormGeneratorModel);\n```\n\n#### Customize easyFormGenerator\n\n**Multilanguage support:**\n\nDefault or fallback language is set to `english` **by default** (_but you can change this fallback language_).\n\n| language             | key     | note                                   |\n| :------------------- | :------ | :------------------------------------- |\n| english              | 'en'    |                                        |\n| french               | 'fr'    |                                        |\n| german               | 'de'    |                                        |\n| japanese             | 'jp'    |                                        |\n| spanish              | 'es'    | thx to **Benjamin Orozco** :thumbsup:  |\n| turkish              | 'tr'    | thx to **Serhat Can** :thumbsup:       |\n| bresilian portuguese | 'pt-br' | thx to **Leandro.Battisti** :thumbsup: |\n| chinese              | 'zh'    | thx to **@alansong** :thumbsup:        |\n\n![preview](https://rawgit.com/MacKentoch/easyFormGenerator/master/images/languages.png)\n\n_Change the default language in your controller:_\n\n```javascript\nangular\n.module('YOURAPP', ['...'])\n.config(easyFromConfigFct);\n\n//inject easyFormSteWayConfigProvider\neasyFromConfigFct.$inject = ['easyFormSteWayConfigProvider'];\nfunction easyFromConfigFct(easyFormSteWayConfigProvider){\n\n//example get current language (by default = english)\nconsole.info(easyFormSteWayConfigProvider.getCurrentLanguage());\n//set language to french (see corresponding keys in upper table):\neasyFormSteWayConfigProvider.setLanguage('fr');\n```\n\n**enable disable controls:**\n\nAll controls are enabled by default.\n\n- list of controls:\n\n| control name   | control key      |\n| :------------- | :--------------- |\n| empty control  | `empty`          |\n| header         | `header`         |\n| Subtitle       | `Subtitle`       |\n| TextInput      | `TextInput`      |\n| Password       | `Password`       |\n| Email          | `Email`          |\n| IpAdress       | `IpAdress`       |\n| Date           | `Date`           |\n| Texarea        | `Texarea`        |\n| RichTextEditor | `RichTextEditor` |\n| Radio          | `Radio`          |\n| Checkbox       | `Checkbox`       |\n| BasicSelect    | `BasicSelect`    |\n| GroupedSelect  | `GroupedSelect`  |\n\n```javascript\n angular\n   .module('YOURAPP', ['...'])\n   .config(easyFromConfigFct);\n\n //inject easyFormSteWayConfigProvider\n easyFromConfigFct.$inject = ['easyFormSteWayConfigProvider'];\n function easyFromConfigFct(easyFormSteWayConfigProvider){\n   /////////////////////////////\n   // DISABLE EXAMPLES\n   /////////////////////////////\n   //disable a single control:\n   easyFormSteWayConfigProvider.disableControl('TextInput');\n   //disable a list of controls:\n   easyFormSteWayConfigProvider.disableControl(['BasicSelect', 'GroupedSelect']);\n\n   /////////////////////////////\n   // ENABLE EXAMPLES\n   /////////////////////////////\n   //enable a single control:\n   easyFormSteWayConfigProvider.enableControl('TextInput');\n   //enable a list of controls:\n   easyFormSteWayConfigProvider.enableControl(['BasicSelect', 'GroupedSelect']);\n```\n\n**show hide preview panel details:**\n\n- show / hide entire `form preview panel`\n- show / hide `preview models` in preview panel\n\n```javascript\nangular\n  .module(\"appDemo\", [\n    \"eda.easyformGen.stepway\" //injects easy form generator-step way\n  ])\n  .config(configFct)\n  .controller(\"demoController\", demoController);\n\n/**\n * config\n */\nconfigFct.$inject = [\"easyFormSteWayConfigProvider\"];\nfunction configFct(easyFormSteWayConfigProvider) {\n  //show/hide preview panel =\u003e default is true\n  easyFormSteWayConfigProvider.showPreviewPanel(true);\n  //show/hide models in preview panel =\u003e default is true\n  easyFormSteWayConfigProvider.showPreviewModels(true);\n}\n```\n\n---\n\n### Using Drag and drop way version (BETA)\n\n\u003e Check demo: [`dragDropWay.html` in `preview` directory](https://github.com/MacKentoch/easyFormGenerator/blob/master/preview/dragDropWay.html)\n\n#### Install\n\nInstalling easyFormGenerator will install in a row:\n\n- step way\n- drag and drop way\n- form viewer\n\n_Install:_\n\n```bash\nnpm install --save easy-form-generator\n```\n\nor\n\n```bash\nyarn install easy-form-generator\n```\n\n#### dependencies\n\nEasy form generator creates amazing bootstrap forms thanks to these dependencies:\n\n| dependency            | npm install                                     | from dist/vendors                                                                        |\n| :-------------------- | :---------------------------------------------- | :--------------------------------------------------------------------------------------- |\n| bootstrap (css / js)  | `npm i --save bootstrap`                        | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| bootswatch            | `npm i --save bootswatch`                       | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| jquery                | `npm i --save jquery`                           | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| angular js (\u003e= 1.3.X) | `npm i --save angular`                          | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| ngAnimate             | `npm i --save angular-animate`                  | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| angular-translate     | `npm i --save angular-translate`                | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| angular-ui-bootstrap  | `npm i --save angular-ui-bootstrap`             | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| textAngular           | `npm i --save textangular`                      | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| angular-strap         | `npm i --save angular-strap`                    | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| nya-bootstrap-select  | `npm i --save @lordfriend/nya-bootstrap-select` | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| angular toaster       | `npm i --save angularjs-toaster`                | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n\n_They are not include in easyFormGenerator bundle to avoid side effects / collisions in your application._\n\n_It is up to you to include them in your application depending on your dev workflow._\n\n\u003e It will be far more talkative be checking demo: [`dragDropWay.html` in `preview` directory](https://github.com/MacKentoch/easyFormGenerator/blob/master/preview/dragDropWay.html)\n\n#### Inject easy form generator in your app\n\nJust inject `eda.easyformGen.dragdropway` in you application:\n\n```javascript\nangular.module(\"appDemo\", [\n  \"eda.easyformGen.dragdropway\" //injects easy form generator drag and drop way\n]);\n```\n\n#### All easy form generator just by this small html:\n\n```html\n\u003ceda-dragdrop-way-easy-form-gen\u003e\u003c/eda-dragdrop-way-easy-form-gen\u003e\n```\n\n#### Want to Load/save models?\n\nAdd these attributes to interact with your own controller:\n\n- `eda-easy-form-generator-model`: attribute to bind your model\n- `eda-save-form-event`: attribute to bind save form event\n\n```html\n\u003ceda-dragdrop-way-easy-form-gen\n      eda-easy-form-generator-model=\"_MODEL_\"\n      eda-save-form-event=\"_SAVE_FUNCTION_\"\u003e\n\u003c/eda-dragdrop-way-easy-form-gen\u003e\n```\n\n**`eda-easy-form-generator-model` properties are**:\n\n| field name                  | field format | field description                                                                   |\n| :-------------------------- | :----------- | :---------------------------------------------------------------------------------- |\n| `formName`                  | string       | stores `form name`, default is empty string                                         |\n| `btnSubmitText`             | string       | stores submit button name, default is 'Submit'                                      |\n| `btnCancelText`             | string       | stores submit button name, default is 'Cancel'                                      |\n| `edaFieldsModel`            | array        | `easy form generator fields model` that describe form                               |\n| `edaFieldsModelStringified` | string       | edaFieldsModel but stringified (_then easy to save fields model to any database_)   |\n| `formlyFieldsModel`         | object       | `angular formly fields model` (filled by easy form generator from `edaFieldsModel`) |\n| `dataModel`                 | object       | filling the form feeds dataModel                                                    |\n\n**`eda-save-form-event` function**:\n\n```javascript\n//your controller save function should have `edaEasyFormGeneratorModel` parameter\n//it will be filled by easy form generator model\nsaveForm(edaEasyFormGeneratorModel);\n```\n\n---\n\n### Using Easy form viewer (production friendly)\n\n\u003e demo: [`formviewer.html` in `preview` directory](https://github.com/MacKentoch/easyFormGenerator/blob/master/preview/formviewer.html)\n\n#### Install\n\nInstalling easyFormGenerator will install in a row:\n\n- step way\n- drag and drop way\n- form viewer\n\n_Install:_\n\n```bash\nnpm install --save easy-form-generator\n```\n\nor\n\n```bash\nyarn install easy-form-generator\n```\n\n#### dependencies\n\nEasy form generator creates amazing bootstrap forms thanks to these dependencies:\n\n| dependency            | npm install                                     | from dist/vendors                                                                        |\n| :-------------------- | :---------------------------------------------- | :--------------------------------------------------------------------------------------- |\n| bootstrap (css / js)  | `npm i --save bootstrap`                        | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| bootswatch            | `npm i --save bootswatch`                       | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| jquery                | `npm i --save jquery`                           | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| angular js (\u003e= 1.3.X) | `npm i --save angular`                          | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| ngAnimate             | `npm i --save angular-animate`                  | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| textAngular           | `npm i --save textangular`                      | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n| nya-bootstrap-select  | `npm i --save @lordfriend/nya-bootstrap-select` | [dist/vendors](https://github.com/MacKentoch/easyFormGenerator/tree/master/dist/vendors) |\n\n_They are not include in easyFormGenerator bundle to avoid side effects / collisions in your application._\n\n_It is up to you to include them in your application depending on your dev workflow._\n\n\u003e It will be far more talkative be checking demo: [`formviewer.html` in `preview` directory](https://github.com/MacKentoch/easyFormGenerator/blob/master/preview/formviewer.html)\n\n#### Inject easy form viewer in your app\n\nJust inject `eda.easyFormViewer` in you application:\n\n```javascript\n(function(angular){\n    'use strict';\n    angular\n        .module('app', ['eda.easyFormViewer']) //inject easy form viewer\n        .controller('demoController', demoController);\n\n    //your controller, here an implementation suggestion\n    demoController.$inject = ['$timeout'];\n    function demoController($timeout){\n      var demoCtrl = this;\n\n      demoCtrl.fieldsModel    = loadMySavedEdaFieldsModel(); //=\"edaFieldsModel\" - see easy form generator model -\n      demoCtrl.dataModel\t\t\t= {}; //data Model: filling form will fill it (submit event will return updated data model)\n\n      demoCtrl.submitButtonText = 'Submit this form'; //button text\n      demoCtrl.cancelButtonText = 'Cancel all'; //button text\n\n      demoCtrl.submitFormEvent \t= submitFormEvent; //event called on form submit\n      demoCtrl.cancelFormEvent \t= cancelFormEvent; //event called on form cancel\n\n      function loadMySavedEdaFieldsModel(){\n        var mySavedModel = readItWhereISavedIt();\n        return mySavedModel;\n      }\n\n      //submit will return updated dataModel in \"dataModelSubmitted\" parameter\n      function submitFormEvent(dataModelSubmitted){\n        console.info('Submit event: you can manage this event in your controller');\n        console.dir( {'dataModelSubmitted': dataModelSubmitted} );\n      }\n\n      function cancelFormEvent(){\n        console.info('Cancel event: you can manage this event in your controller');\n      }\n    }\n      //...\n```\n\n#### All easy form viewer directive:\n\n```html\n\u003ceda-easy-form-viewer\n\t\teda-easy-form-viewer-data-model=\"demoCtrl.dataModel\"\n\t\teda-easy-form-viewer-easy-form-generator-fields-model=\"demoCtrl.fieldsModel\"\n\n\t\teda-easy-form-viewer-submit-button-text=\"{{demoCtrl.submitButtonText}}\"\n\t\teda-easy-form-viewer-cancel-button-text=\"{{demoCtrl.cancelButtonText}}\"\n\n\t\teda-easy-form-viewer-submit-form-event=\"demoCtrl.submitFormEvent(dataModelSubmitted)\"\n\t\teda-easy-form-viewer-cancel-form-event=\"demoCtrl.cancelFormEvent()\"\u003e\n\u003c/eda-easy-form-viewer\u003e\n```\n\n| eda-easy-form-viewer property                         | format   | description                                                                    |\n| :---------------------------------------------------- | :------- | :----------------------------------------------------------------------------- |\n| eda-easy-form-viewer-data-model                       | object   | data model to preload form (from a previous database save for example).        |\n| eda-easy-form-viewer-easy-form-generator-fields-model | object   | easy form generator generated form object (by step way or drag and drop way)   |\n| eda-easy-form-viewer-submit-button-text               | string   | submit button text                                                             |\n| eda-easy-form-viewer-cancel-button-text               | string   | cancel button text                                                             |\n| eda-easy-form-viewer-submit-form-event                | function | to handle submit event in your controller (like saving data model for example) |\n| eda-easy-form-viewer-cancel-form-event                | function | to handle cancel event in your controller                                      |\n\n---\n\n## What is new?\n\n- see [release notes](https://github.com/MacKentoch/easyFormGenerator/blob/master/RELEASE_NOTES.md#releases)\n\n_older:_\n\n- December 2016: v2.0.0 (big tsunami update):\n- leave bower, gulp and jspm in favor of webpack + npm\n- new control: `IP adress`\n- new language added `Brazilian Portuguese` thanks to `Leandro.Battisti`\n- December 2016: v1.2.0 is released\n- March 2016: v1.1.0 is released.\n\n- November 2015: v1.1.0 coming soon: migration to ES6 + fixes\n\n- October 2015: `Easy form Generator step way`: new config available with `easyFormSteWayConfigProvider`:\n  - show/hide preview panel\n  - show hide models (in prevew panel)\n\n```javascript\nangular\n  .module(\"appDemo\", [\n    \"eda.easyformGen.stepway\" //injects easy form generator-step way\n  ])\n  .config(configFct)\n  .controller(\"demoController\", demoController);\n\n/**\n * config\n */\nconfigFct.$inject = [\"easyFormSteWayConfigProvider\"];\nfunction configFct(easyFormSteWayConfigProvider) {\n  //show/hide preview panel =\u003e default is true\n  easyFormSteWayConfigProvider.showPreviewPanel(true);\n  //show/hide models in preview panel =\u003e default is true\n  easyFormSteWayConfigProvider.showPreviewModels(true);\n}\n```\n\n- October 2015: `Easy form Generator step way`: demo updated [stepway with language selection](https://rawgit.com/MacKentoch/easyFormGenerator/master/index_StepWay_ES6.html)\n\n- October 2015: `Easy form Generator step way`: new languages added\n  - french\n  - german\n  - japanese\n  - spanish (thx to **Benjamin Orozco** :thumbsup:)\n  - turkish (thx to **Serhat Can** :thumbsup:)\n    ![preview](https://rawgit.com/MacKentoch/easyFormGenerator/master/images/languages.png)\n\n```javascript\n angular\n   .module('YOURAPP', ['...'])\n   .config(easyFromConfigFct);\n\n //inject easyFormSteWayConfigProvider\n easyFromConfigFct.$inject = ['easyFormSteWayConfigProvider'];\n function easyFromConfigFct(easyFormSteWayConfigProvider){\n\n   //example get current language (by default = english)\n   console.info(easyFormSteWayConfigProvider.getCurrentLanguage());\n   //set language to french:\n   easyFormSteWayConfigProvider.setLanguage('fr');\n```\n\n- October 2015: `Easy form Generator step way`: enable or disable control in your easy form generator step way version.\n\n```javascript\n angular\n   .module('YOURAPP', ['...'])\n   .config(easyFromConfigFct);\n\n //inject easyFormSteWayConfigProvider\n easyFromConfigFct.$inject = ['easyFormSteWayConfigProvider'];\n function easyFromConfigFct(easyFormSteWayConfigProvider){\n\n   //disable basic TextInput:\n   easyFormSteWayConfigProvider.disableControl('TextInput');\n\n   //enable Date input:\n   //(NOTE: by default all controls are enabled\n   //-\u003e so this example is no other use than illustration)\n   easyFormSteWayConfigProvider.enableControl('Date');\n\n   // List of all easy form generator (step way version) controls:\n   // 'empty'\n   // 'Header'\n   // 'TextInput'\n   // 'Password'\n   // 'Date'\n   // 'Texarea'\n   // 'RichTextEditor'\n   // 'Radio'\n   // 'Checkbox'\n   // 'BasicSelect'\n   // 'GroupedSelect'\n```\n\n- Sept 2015: `drag and drop way` is now a simple directive `eda-dragdrop-way-easy-form-gen`\n\n- `Easy form Generator - Step way: new provider`: enable/disable modal animation from your own config thanks to new provider `easyFormSteWayConfigProvider`\n\n```javascript\nangular.module(\"YOUR_APP\", []).config(easyFromConfigFct);\n\neasyFromConfigFct.$inject = [\"easyFormSteWayConfigProvider\"];\nfunction easyFromConfigFct(easyFormSteWayConfigProvider) {\n  //enable/disable easy form modal animation\n  //HERE: animation disabled due to angular bootstrap backdrop bug with angular \u003e= 1.4\n  easyFormSteWayConfigProvider.setModalAnimation(false);\n}\n```\n\n    + more easy form generator - step way - config. later\n\n- `Fix applied in v1.0.17`: :bug: **[angular bootstrap modal animation issues when using angular\u003e 1.3](https://github.com/angular-ui/bootstrap/issues/3633) ** — _backdrop won't disapear when closing modal_ —. Waiting for fix, so untill fix is realeased modal animation is disabled to prevent this issue :disappointed_relieved:.\n\n- `step way versions` is now a module easier to interact with your application.\n\n- :newspaper: `step way`: added `email` control\n  - email entered must follow _an email pattern_ (validation included)\n  - a validation message is displayed when entered email is invalid (pattern related)\n  - preview:\n\n![email and validations](https://cdn.rawgit.com/MacKentoch/easyFormGenerator/master/images/emailAndValidation.png)\n\n## Donate\n\nDo you use \u0026 like easyFormGenerator but you don’t find a way to show some love?\nIf yes, please consider donating to support this project. Otherwise, no worries, regardless of whether there is support or not, I will keep maintaining this project. Still, if you buy me a cup of coffee I would be more than happy though 😄\n\n[![Support via PayPal](./images/Paypal-button.png)](https://www.paypal.me/ErwanDatin/)\n\n## License\n\nThe MIT License (MIT)\n\nCopyright (c) 2019 Erwan DATIN\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FMacKentoch%2FeasyFormGenerator.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2FMacKentoch%2FeasyFormGenerator?ref=badge_large)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmackentoch%2Feasyformgenerator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmackentoch%2Feasyformgenerator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmackentoch%2Feasyformgenerator/lists"}