formio - 如何使用 vanilla JS 使用 form.io 呈现表单？

Question

我在 CodePen上玩 form.io 演示，但它使用 Angular。假设我有一个基本的 JSON 表单和一个未绑定到任何框架的 html 页面，那么呈现表单、使用可选模型初始化表单以及在提交表单后收集模型的最简单方法是什么？

有没有做这种事情的 form.io JavaScript 库？

示例 form.io JSON 表单片段：

{
  components: [
  {
    input: true,
    tableView: true,
    inputType: "text",
    inputMask: "",
    label: "First Name",
    key: "firstName",

Answer 1

formio 开发人员为此特定用例提供了 formio.js 。链接在这里

Answer 2

根据他们自己的文档：在您的索引中：

<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="./node_modules/formiojs/dist/formio.form.min.css" />
<script src="node_modules/formiojs/dist/formio.form.min.js"></script>
<div id="formID" class="demo-box">Loading...</div>

然后在你的js中：

let schema = {
  components: [
  {
    input: true,
    tableView: true,
    inputType: "text",
    inputMask: "",
    label: "First Name",
    key: "firstName"
  }]
}
let data = {}
let formio = new Formio.createForm(document.getElementById('formID'), schema, data)

我建议使用此站点来构建您的架构：https ://formio.github.io/formio.js/app/sandbox