ui-bootstrap compatibility update

easyFormGenerator : in this version 1.2.0

• stepway
• form viewer

now compatible with ui-bootstrap > 0.14 🎉

As it implies breaking changes to follow ui-bootstrap (directives naming changed to uib-*)

• from v1.2.0 easyFormGenerator does no more support older versions of ui-boostrap (means before directives naming changed to uib-*).

❗ For older versions of ui-boostrap, use easyFormGenerator v1.1.0.

Easy form generator - drag and drop way

This release just fix EasyFormGenerator-DragAndDropWay-DEMO.html.

Content is the same as v1.0.31

Drag and drop way is in BETA and should not be used in production.

easy form generator - step way

WHAT'S NEW

demo updated

new configs available with easyFormSteWayConfigProvider :
- show/hide preview panel
- show hide models (in prevew panel)

  angular
    .module('appDemo', [
      'eda.easyformGen.stepway' //injects easy form generator-step way
    ])
    .config(configFct)
    .controller('demoController', demoController);

  /**
    * config
    */
  configFct.$inject = ['easyFormSteWayConfigProvider'];
  function configFct(easyFormSteWayConfigProvider){
    //show/hide preview panel => default is true
    easyFormSteWayConfigProvider.showPreviewPanel(true);
    //show/hide models in preview panel => default is true
    easyFormSteWayConfigProvider.showPreviewModels(true);
  }

**new languages added : **
- french
- german
- japaneese
- spanish (thx to Benjamin Orozco 👍)
- turkish (thx to Serhat Can 👍)

easy form generator - step way

New cool features added 🎉 :

Live demo / example code here

• enable / disable control

  angular
    .module('YOURAPP', ['...'])
    .config(easyFromConfigFct);
  
  //inject easyFormSteWayConfigProvider
  easyFromConfigFct.$inject = ['easyFormSteWayConfigProvider'];
  function easyFromConfigFct(easyFormSteWayConfigProvider){
  
    //disable basic TextInput :
    easyFormSteWayConfigProvider.disableControl('TextInput');
  
    //enable Date input : 
    //(NOTE : by default all controls are enabled 
    //-> so this example is no other use than illustration)
    easyFormSteWayConfigProvider.enableControl('Date');
  
    // List of all easy form generator (step way version) controls :  
    // 'empty'
    // 'Header'
    // 'TextInput'
    // 'Password'
    // 'Date'
    // 'Texarea'
    // 'RichTextEditor'
    // 'Radio'
    // 'Checkbox'
    // 'BasicSelect'
    // 'GroupedSelect'

• multi-language (now 🇬🇧 🇫🇷 🇩🇪 🇯🇵)

IN YOUR APP CONFIG :

  angular
    .module('YOURAPP', ['...'])
    .config(easyFromConfigFct);

  //inject easyFormSteWayConfigProvider
  easyFromConfigFct.$inject = ['easyFormSteWayConfigProvider'];
  function easyFromConfigFct(easyFormSteWayConfigProvider){

    //example get current language (by default = english)
    console.info(easyFormSteWayConfigProvider.getCurrentLanguage());
    //set language to french :
    easyFormSteWayConfigProvider.setLanguage('fr');

   //NOTE : list of available language : 'en', 'fr', 'de', 'jp'
   //IMPORTANT : by default : always 'en' 

OR (MORE DYNAMIC) IN YOUR CONTROLLER, SERVICES... :

 //in your controller : inject easyFormSteWayConfig provider
 demoController.$inject = ['$timeout', 'easyFormSteWayConfig']; 
   function demoController($timeout, easyFormSteWayConfig){
      var demoCtrl = this;
      demoCtrl.currentLangue = refreshCurrentLanguage();
      demoCtrl.switchLanguage = switchLanguage;

      console.info('Current language is ' + demoCtrl.currentLangue);

      function refreshCurrentLanguage(){
         demoCtrl.currentLangue = easyFormSteWayConfig.getCurrentLanguage();
      }

      //param : toLanguage is a string with 'en' or 'de' or 'fr' or 'jp'
      function switchLanguage(toLanguage){
         if(angular.isString){
            easyFormSteWayConfig.setLanguage(toLanguage);
               refreshCurrentLanguage();                    
               console.info('language changed to ' + demoCtrl.currentLangue);
            }
      }

want more language? Contribute easily (no dev skills required) to add more (catch me here)

easy form viewer (easier way to display generated forms in your application)

fixed textAngular issue since version 1.4.4.

Now easy form generator uses its own css for textAngular to avoid future new breaking changes.

Easy form viewer (easier way to display generated forms in your application)

Easy form viewer

Easy form generator (Step way or drag and drop way) : generates forms.

But if you want to simply display your generated forms, easy form generator directive does not suits.
You could use angular formly directive. But easy form generator contains a lot of custom nice controls that you may have to configure.

So to make it easy, easy form viewer does the hard job for you since v1.0.21.

Compare before and after this version.

Before v1.0.21 :

javascript :

      //you had to inject all dependencies
      // you had to copy .config... 
      var demoApp = angular.module('demoApp', [  
                                              'textAngular',  
                                              'formly',  
                                              'formlyBootstrap', 
                                              'ui.bootstrap', 
                                              'nya.bootstrap.select', 
                                              function () { 
      }]); 
      // HUGE CONFIG HERE 
     //here just a sample... 
      demoApp.config([  'formlyConfigProvider',  
                        function(formlyConfigProvider) { 
          formlyConfigProvider.setType( 
            { 
              name: 'richEditor', 
              template: '<text-angular class="richTextAngular" ng-model="model[options.key || index]"></text-angular>' 
            } 
          ); 
          formlyConfigProvider.setType( 
            { 
              name: 'blank', 
              template: '<div></div>' 
            } 
          ); 

html :

<!-- here is the simple HTML you need (everything else is decoration) : --> 
<form ng-submit="vm.onSubmit()" name="vm.form" novalidate> 
    <formly-form model="vm.model" fields="vm.fields" options="vm.options" form="vm.form"> 
        <button type="submit" class="btn btn-primary submit-button pull-right" ng-disabled="vm.form.$invalid">{{vm.buttons.submit}}</button> 
        <button type="button" class="btn btn-primary pull-right" ng-click="vm.options.resetModel()">{{vm.buttons.cancel}}</button> 
    </formly-form> 
</form> 

Since v1.0.21 :

javascript :

//no more giant .config to add in your app
//no more manual dependencies injection (easy form viewer did it for you, so just inject eda.easyFormViewer)

(function(angular){
  'use strict';
  angular
    .module('app', ['eda.easyFormViewer'])     //no more .config needed
    .controller('demoController', demoController);
    //here demoCtrl as an example for your controller    
    demoController.$inject = [];    
    function demoController(){
     var demoCtrl = this;

    demoCtrl.fieldsModel        = testACompleteForm();
    demoCtrl.dataModel      = {};

    demoCtrl.submitButtonText = 'Submit this form';
    demoCtrl.cancelButtonText = 'Cancel all';

    demoCtrl.submitFormEvent    = submitFormEvent;
    demoCtrl.cancelFormEvent    = cancelFormEvent;

          function submitFormEvent(dataModelSubmitted){
         //... and so on, implement your controller
})(angular);

html :

<!-- Easy form viewer -->
<eda-easy-form-viewer
        eda-easy-form-viewer-data-model="demoCtrl.dataModel"
        eda-easy-form-viewer-easy-form-generator-fields-model="demoCtrl.fieldsModel"

        eda-easy-form-viewer-submit-button-text="demoCtrl.submitButtonText"
        eda-easy-form-viewer-cancel-button-text="demoCtrl.cancelButtonText"

        eda-easy-form-viewer-submit-form-event="demoCtrl.submitFormEvent(dataModelSubmitted)"
        eda-easy-form-viewer-cancel-form-event="demoCtrl.cancelFormEvent()">    
</eda-easy-form-viewer>

Easy Form Generator -Step way (Module)

Easy Form Generator -Step way

Updated - bower.json -

AngularJS to v1.4.5.

Easy form Generator is tested OK from angularjs v1.3.x to v1.4.5.

Easy Form Generator -Step way as Module

Easy Form Generator - step way

What's new since last release :

• v1.0.9 : bower purpose release

NOTE : Drag and drop way still in beta and really not production ready

Easy Form Generator -Step way as Module

Easy Form Generator - step way

What's new since last release :

• Step way version (production ready) is now a simple to use module.
  • interact load / save models in your own application controller
• validation and expression are implemented
• new control = "email" (with its own email shape validation)

NOTE : Drag and drop way still in beta and really not production ready

first release

Easy Form Generator first release.

This one is pre-release since

• need more refactoring, more services, providers...
• does not contains drag and drop as alternative version