Form.IO - Form events not firing

Question

I'm using Form.IO JS library for developing various new forms. Recently, the need to perform some actions upon opening the form has been presented. So, I searched the documentation on form events. Except from 'change' / 'submit' / 'focus' / 'blur' events, no other event is firing after initialising my form. I'm providing some of my code below:

Formio.createForm(document.getElementById('formio'), components, formOptions)
      .then(function(form) {
         // Working
         form.on('change', function() {
           console.log('change');
         });
         // NOT WORKING
         form.on('initialized', function() {
           console.log('initialized');
         });
         // NOT WORKING
         form.on('render', function() {
           console.log('render');
         });
       });

Does someone have any ideas whatsoever on why those events are not firing? Thanks in advance!

Answer 1

The initialized event should fire just fine as you've described. The render event will fire when you re-render the form.

See JSFiddle and take a look at the comments and the console output.

EDIT:

From our discussion below, it seems like you just want to know a certain point in the form render process where it's OK to add some custom logic. When the createForm resolves to the form instance, we're already in a place where a form has been initialized and rendered.

Formio.createForm(document.getElementById('formio'), components).then((formInstance) => {
  // the createForm promise has resolved to 
  // the already-initialized and rendered form instance
  console.log(formInstance);
});

We can add event listeners here...

Formio.createForm(document.getElementById('formio'), components).then((formInstance) => {
  customUploadBtnClickListener();
});

but there's no need, Form.io handles that for you! A button with "action: 'custom'" takes a "custom" property, which is just a javascript string that the renderer will safely evaluate.

var formJson = {
  components: [
    /* ...rest of components... */
    {
      label: "<br>",
      action: "custom",
      showValidations: false,
      leftIcon: "fa fa-paperclip fa-rotate-90",
      customClass: "customUploadBtn",
      tableView: false,
      key: "customUploadBtn",
      type: "button",
      custom: "console.log(\"Clicked!\");",
      input: true
    },
    /* etc... */
  ]
};

I've made a JSFiddle with all this explained and some more conceptual stuff, let me know if this helps clear things up.