VanillaJS Form.io Renderer

by brendanbond

HTML

<script src="https://unpkg.com/formiojs@latest/dist/formio.full.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/formiojs@latest/dist/formio.full.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="page-content">
  <div class="container-fluid">
    <div id="app" class="myClass"></div>
  </div>
</div>

JavaScript

const def = {
  "components": [{
      "label": "Edit Grid",
      "tableView": false,
      "rowDrafts": false,
      "key": "editGrid",
      "type": "editgrid",
      "displayAsTable": false,
      "input": true,
      "components": [{
        "label": "Text Field",
        "applyMaskOn": "change",
        "tableView": true,
        "calculateValue": "instance.label += ` ${instance.rowIndex + 1}`",
        "key": "myTextField",
        "type": "textfield",
        "input": true
      }]
    },
    {
      "type": "button",
      "label": "Submit",
      "key": "submit",
      "disableOnInvalid": true,
      "input": true,
      "tableView": false
    }
  ]
}
Formio.createForm(document.getElementById("app"), 'https://bb-happy-time.form.io/simpleform3').then((form) => {
	form.searchComponents()
})