Question

我正在使用form.io demo on CodePen，但它使用的是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

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

2 个答案: