Creating Nested Forms

[arvindr21]

Hello,

Thanks for the amazing form builder. I was wondering if we can have nested sections in a form?

For Instance, I want to create a component called a section. And a user drags and drops the section on to the form builder. And now he has an option of dragging and dropping other form elements inside that section or the main form itself.

Is this possible?

Thanks!

[darrencauthon]

It is very possible.

[arvindr21]

Thanks for the confirmation @darrencauthon. Any hints as how this can be achieved?

I have set the template to be

$builderProvider.registerComponent('section', {
          group: 'Generic',
          label: 'Section',
          required: false,
          className: '',
          eleId: '',
          eleName: '',
          template: "<div class=\"form-group text-left\">\n    <h3 for=\"{{formName+index}}\" class=\"pd-l-20\" ng-class=\"{'fb-required':required}\">{{label}}</h3>\n <div fb-builder=\"default\"></div>   </div>",
          popoverTemplate: "<form>\n    <div class=\"form-group\">\n        <label class='control-label'>Label</label>\n        <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n    </div>\n  <div class=\"form-group\">\n        <label class='control-label'>ID</label>\n        <input type='text' placeholder=\"Optional\" ng-model=\"eleId\" class='form-control'/>\n    </div>\n<div class=\"form-group\">\n        <label class='control-label'>Class Name</label>\n        <input type='text' placeholder=\"Optional\" ng-model=\"className\" class='form-control'/>\n    </div>\n     <div class=\"form-group\">\n        <label class='control-label'>Name</label>\n        <input type='text' placeholder=\"Optional\" ng-model=\"eleName\" class='form-control'/>\n    </div>\n        <div class='form-group'>\n        <input type='submit' ng-click=\"popover.save($event)\" class='btn btn-primary' value='Save'/>\n        <input type='button' ng-click=\"popover.cancel($event)\" class='btn btn-default' value='Cancel'/>\n        <input type='button' ng-click=\"popover.remove($event)\" class='btn btn-danger' value='Delete'/>\n    </div>\n</form>"
        });

Which has the below directive as part of the template

<div fb-builder=\"default\"></div> 

And I have modified the directive to

// snipp
restrict: 'A',
        scope: {
          fbBuilder: '@'
        }, 
/// snipp

But when I drag and drop the form on top of the Main form builder the screen freezes. I am assuming that the dropped form component is trying to drop inside it self too and on the main form builder as well (insertFormObject()).

Any clue on how I can resolve this?

Thanks!

[darrencauthon]

I'll give some general advice... sometimes when you want to do something, it's better to look at a tool like this one and work your problem around what it provides you for nothing - instead of asking how to change the tool to fit your problem.

In this case, it seems that you want to change the formatting of the form to form "sections." Perhaps you could achieve a form that looks & works the same to the end user by changing the formatting to look like sections? Instead of forcing the "section" abstraction into the tool?

[arvindr21]

Thanks @darrencauthon That was actually my plan B. I would have 2 components named section-start and section-end and the user can drags a section-start, after that adds form fields and then a section-end. This way the same UX is achieved and I can update the JSON parsing accordingly.

I wanted to take a dig at the above approach before I switched to plan B.