如何在Formio.js表单构建完成后获取JSON Schema并存入数据库？

嘿，我刚好知道怎么解决这个问题！其实Formio的表单构建器实例本身就内置了获取当前表单JSON Schema的方法，你不需要找太复杂的API，直接访问实例的schema属性就行。

你可以这样修改你的代码：

<div id='builder'></div>
<!-- 可以加个按钮手动触发保存，也可以在表单变化时自动获取 -->
<button id="saveToDb">保存表单到数据库</button>

<script type='text/javascript'>
var builder = Formio.builder(document.getElementById('builder'), {}, {});
builder.then(function(form){
  // 表单内容变化时，实时获取最新的Schema
  form.on("change", function(e){
    console.log("表单已更新，最新Schema:", form.schema);
    // 这里可以直接把form.schema传给你的后端接口，存入数据库
  });

  // 或者通过按钮手动触发保存操作
  document.getElementById("saveToDb").addEventListener("click", function() {
    const formJson = form.schema;
    console.log("准备存入数据库的表单Schema:", formJson);
    
    // 这里写你调用后端接口的逻辑，比如用fetch或者axios发送JSON
    // 示例：
    /*
    fetch('/your-database-api-endpoint', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(formJson),
    })
    .then(res => res.json())
    .then(data => alert("表单保存成功！"))
    .catch(err => console.error("保存出错:", err));
    */
  });
});
</script>

关键说明： #

• form.schema是Formio表单构建器实例的核心属性，它包含了当前表单的完整JSON Schema，包括所有组件配置、验证规则、布局设置等，完全满足你存入数据库的需求。
• 不管是表单实时变化时自动获取，还是手动触发保存，直接访问这个属性就能拿到最新的表单结构。
• 如果你是从已有表单加载到构建器中进行修改，form.schema也会实时同步修改后的内容，非常方便。

内容的提问来源于stack exchange，提问作者Mr Hery