Formio Angular中绑定editGridSaveRow事件无响应如何解决？

解决方案 #

Angular封装的Formio组件默认仅对外暴露了submit这类顶层事件，你要监听的editGridSaveRow属于组件内部自定义事件，无法直接通过括号绑定监听，按以下步骤修改即可：

• 第一步：给formio组件绑定customEvent事件回调，所有底层自定义事件都会通过这个出口透出
  模板代码修改如下：

  <formio 
   [form]='form' 
   [submission]='submission' 
   (submit)="test($event)"
   (customEvent)="handleCustomEvent($event)"
  >
  </formio> 
  

• 第二步：在对应ts文件中新增事件过滤逻辑
  代码示例：

  handleCustomEvent(event: any) {
    if (event.type === 'editGridSaveRow') {
      // 此处触发你要执行的逻辑，event.data中携带当前编辑行的所有数据
      this.test(event.data);
    }
  }
  

• 异常排查：如果修改后仍无法监听到事件
  • 确认你使用的@formio/angular依赖版本 ≥ 5.0，低于该版本可执行npm install @formio/angular@latest升级依赖
  • 确认你没有修改editGrid组件的默认事件配置，屏蔽了save事件的冒泡传递

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