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>