ngFormBuilder icon indicating copy to clipboard operation
ngFormBuilder copied to clipboard

load and remove different forms succesively on the same page (json communication via websocket)

Open StefanHoutzager opened this issue 9 years ago • 2 comments

Hi, I managed to make a small modification to ngformbuilder-full.js so that it pushes submissiondata to a websocket. I can load the formdefinitions json also via the websocket, after creating the necessary div elements in javascript, with the javascript part in https://github.com/formio/ngFormBuilder/blob/master/index.html in a function where the json is an input param and assign $rootScope.form = the input parameter. the formbuilder is loaded via

   if (typeof angular == 'undefined') {
    $.ajax({
      cache: true,
      url: '/js/ngFormBuilder-full.js',
      dataType: 'script',
      success: function () {
        document.getElementById('taskReferenceDiv').task.renderFormIOFormContents(resp.formfields[0])
      }
    });
    }

This works. My question is: after submit of a first form I would like load a next json with formdefinitions, while I stay on the same page. I can remove the divs I named above after the submit, maybe do $rootScope.$destroy(), but how can I prepare to show this next form? typeof angular != 'undefined' now, I cannot load ngFormBuilder-full.js a second time. I have no particular angular knowledge. Appreciate your work, it is a great product!

StefanHoutzager avatar Jan 17 '17 14:01 StefanHoutzager

This is what our wizard component does where it just swaps out the form= attribute with the new Form schema. The component will render the new form dynamically. Here is some code where this works.

https://github.com/formio/ngFormio/blob/master/src/directives/formioWizard.js#L91

Hope this helps.

Travis.

travist avatar Jan 17 '17 15:01 travist

Thanks to your suggestion I have it working. I cannot use a formiowizard as the order of the forms must be determined runtime. Should there be no problem concerning memory leaks with the following solution? After submission of a form's data I have

$rootScope.form.components = [];
$rootScope.form.components.length = 0;

To swap forms I use

$rootScope.form = formComponents; // SHO was incoming parameter
$rootScope.renderForm = true;
$rootScope.$digest()

StefanHoutzager avatar Jan 18 '17 15:01 StefanHoutzager