Form.IO表单事件无法触发问题求助

问题原因 #

Formio.createForm()返回的Promise是在表单完成初始化与渲染流程之后才会resolve的。当你进入then回调绑定initialized和render事件时，这两个事件早已触发完毕，所以后续的监听器无法捕获到它们。而change/submit这类事件属于用户交互触发的后续事件，因此能正常响应。

解决方案 #

方法1：使用formOptions的onReady钩子

这是Form.IO官方推荐的表单初始化完成后执行操作的方式，效果等同于监听initialized事件：

const formOptions = {
  onReady: (form) => {
    console.log('表单已初始化完成');
    // 在这里执行表单打开时需要的操作
  }
};

Formio.createForm(document.getElementById('formio'), components, formOptions)
  .then(form => {
    form.on('change', () => {
      console.log('change');
    });
  });

方法2：关闭自动渲染，手动绑定事件后触发渲染

如果一定要使用事件监听的方式，可以通过autoRender: false关闭自动渲染，提前绑定事件后再手动触发渲染流程：

Formio.createForm(document.getElementById('formio'), components, { autoRender: false })
  .then(form => {
    // 提前绑定初始化与渲染事件
    form.on('initialized', () => {
      console.log('initialized');
    });
    form.on('render', () => {
      console.log('render');
    });
    
    form.on('change', () => {
      console.log('change');
    });
    
    // 手动触发渲染，此时会依次触发initialized和render事件
    form.render();
  });

内容的提问来源于stack exchange，提问作者kkaragki