Form.io从变量渲染/重建表单时报Uncaught TypeError问题咨询

算力阿峰

2026-10-5

Formio builder 传入JSON报错问题解决方案

核心错误原因

你从textarea中取出的jsonForm1是JSON字符串类型，而Formio.builder的第二个入参要求传入JavaScript对象类型，直接传入字符串会触发类型不匹配报错。同时原有代码中存在一个选择器语法错误。

具体问题点

未做JSON字符串转对象处理：textarea的value属性返回值始终为字符串格式，不符合Formio的入参要求
jQuery选择器多了冗余空格：$("# value_forn_1")中id值前的空格会导致无法匹配到对应textarea元素

修正后代码

window.onload = function () {
  var formJsonStr = document.getElementById("value_forn_1").value;
  var jsonForm1 = {};
  // 增加异常捕获，避免JSON格式异常导致页面崩溃
  try {
    jsonForm1 = JSON.parse(formJsonStr);
  } catch (err) {
    console.error("表单JSON解析失败：", err);
    return;
  }

  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);
      // 移除id选择器中多余的空格
      $("#value_forn_1").val(jsonSchema);
    });
  });
};