formio / formio.js

JavaScript powered Forms with JSON Form Builder
https://formio.github.io/formio.js
MIT License
1.89k stars 1.06k forks source link

Render/Re-build from a variable #4326

Closed malarcon2015 closed 8 months ago

malarcon2015 commented 3 years ago

Hi! I'm doing some tests with https://unpkg.com/formiojs@latest/dist/formio.full.min.js I was able to integrate the constructor in my application and save the generated JSON in a table. Now I want to bring that JSON and be able to edit or render the form but I'm not doing something right.

This is my code:

window.onload = function () {
var jsonForm1 = document.getElementById ("value_forn_1"). value;

console.log (jsonForm1);

var builder = new Formio.builder (document.getElementById ("edit"), jsonForm1, {});
builder.then (function (form) {
  form.on ("change", function (e) {
    console.log ("builder");
    var jsonSchema = JSON.stringify (form.schema, null, 4);
    console.log (jsonSchema);

$ ("# value_forn_1"). val (jsonSchema);

  });
});
};

1) value_forn_1 is the textarea containing the JSON retrieved from my table 2) the console.log (jsonForm1) shows me the JSON of the textarea by console 3) But if I want to pass the variable jsonForm1 from inside Formio.builder, I get the error: Uncaught TypeError: Cannot read properties of null (reading '1') 4) On the other hand, if I directly assign the JSON to jsonForm1:

var jsonForm1 = { "components": [ { "label": "Text Field", "tableView": true, "key": "textField", "type": "textfield", "input": true }, { "label": "Text Area", "autoExpand": false, "tableView": true, "key": "textArea", "type": "textarea", "input": true } ] };

The rendering works ....

What am I doing wrong?

olgabann commented 8 months ago

We're currently addressing a backlog of GitHub issues. Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!