Form.io Lazy Load Renderer

by Amy L

HTML

<script src="https://cdn.form.io/js/formio.embed.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<div id="formio"></div>

TypeScript

Formio.createForm(document.getElementById('formio'), {
  "display": "form",
  "settings": {
    "pdf": {
      "id": "1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
      "src": "https://files.form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a847-26f67b67d6f0"
    }
  },
  "components": [{
      "label": "First name",
      "applyMaskOn": "change",
      "tableView": true,
      "validateOn": "blur",
      "validate": {
        "required": true
      },
      "key": "firstname",
      "type": "textfield",
      "input": true
    },
    {
      "label": "Last name",
      "applyMaskOn": "change",
      "tableView": true,
      "validateOn": "blur",
      "validate": {
        "required": true
      },
      "key": "lastname",
      "type": "textfield",
      "input": true
    },
    {
      "type": "button",
      "label": "Submit",
      "key": "submit",
      //"disableOnInvalid": true,
      "input": true,
      "tableView": false
    }
  ]
}, {
  hooks: {
    beforeSubmit: (submission, next) => {
      // console.log('beforeSubmittttt', submission);
      let myError: Errors | undefined;
      if (submission.data.firstname.toLowerCase() !==
        'a') {
        myError = {
          message: `sorry ${submission.data.firstname} doesn't start with a`
          };
      }

      next(myError);
    }
  }

}).then(function(form) {
  // Defaults are provided as follows.
  form.submission = {
    data: {
      firstname: 'A',
      lastname: 'L'
    }
  };



  // Register for the submit event to get the completed submission.
  form.on('submit', function(submission) {
    console.log('Submission was made!');
  });
  
  // When submission failed due to form validation, etc.
  form.on('submitError', (error) => {
    console.log('Submission error:', error.message);
  });

  // Everytime the form changes, this will fire.
  form.on('change', function(changed) {
     console.log('Form was changed', changed);
   });
   
   // Triggered when an error occurs within a...