FORM.IO - 从变量渲染/重建答案

【问题标题】：FORM.IO - Render/Re-build from a variableFORM.IO - 从变量渲染/重建
【发布时间】：2021-11-06 09:23:36
【问题描述】：

我正在用 https://unpkg.com/formiojs@latest/dist/formio.full.min.js 做一些测试我能够将构造函数集成到我的应用程序中，并将生成的 JSON 保存在表中。现在我想带上那个 JSON 并能够编辑或呈现表单，但我没有做正确的事情。

这是我的代码：

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);

  });
});
};

value_forn_1 是包含从我的表中检索到的 JSON 的文本区域
console.log (jsonForm1) 通过控制台向我显示 textarea 的 JSON
但是，如果我想从 Formio.builder 中传递变量 jsonForm1，我会收到错误消息： 未捕获的 TypeError：无法读取 null 的属性（读取 '1'） 4）另一方面，如果我直接将JSON分配给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 } ] };

渲染工作......

我做错了什么？

【问题讨论】：

标签： formio

【解决方案1】：

我想你已经回答了你自己的问题，但是 jsonForm1 变量中的模式应该被解析成一个 JSON 对象，然后传递给 Formio.builder 函数。

var jsonForm1 = JSON.parse(document.getElementById ("value_forn_1").value);

此外，您还可以查看他们的沙盒。使用 js 库非常有帮助。

沙盒： https://formio.github.io/formio.js/app/sandbox

沙箱后面的代码（参见 initRenderer 函数）： https://github.com/formio/formio.js/blob/master/app/sandbox.html

【讨论】：