首页 > 解决方案 > Formio 文件组件功能需要覆盖

问题描述


我正在尝试覆盖 formio 文件组件功能。每当用户尝试删除上传的文件时,应显示确认弹出窗口,如果用户确认应删除上传的文件。(现在我们在formio中没有这个功能)

在此处输入图像描述

我浏览了各种博客和表单文档。我按照checkmatrix 示例创建了一个自定义组件并覆盖了 formio File.js的 deleteFile(fileInfo) 方法功能

以下是我到目前为止尝试过的代码。

import { Formio } from "formiojs";
const FileComponent = (Formio as any).Components.components.file;
export default class CustomFileComponent extends FileComponent {
    constructor(component, options, data) {
        super(component, options, data);
     }
    init(){
        super.init();
    }
    render(content) {
        return super.render(content);
    }
    static get builderInfo() {
      return {
         title: 'My File Upload',
         group: 'basic',
         icon: 'fa fa-bath',
         weight: 0,
         schema: CustomFileComponent.schema()
        };
      }
   attach(element) {
    return super.attach(element);
  }
  deleteFile(fileInfo) {
     console.log('fileInfo');
     return super.deleteFile(fileInfo);
  }
}

我可以在表单构建器中拖放“我的文件上传”并生成表单,但是除了 builderInfo() 方法之外,没有调用自定义方法。

我尝试寻找回调方法(如果有)但没有找到任何东西。寻找一个解决方案,如果用户试图删除上传的文件,我可以在其中调用自定义功能。

我已将组件注册为

Components.addComponent('CustomFileComponent',CustomFileComponent);

在 app.component.ts

我们正在使用 angular (12.0.2) 和 formiojs (4.12.0)

谢谢!!!

标签: angulartypescriptformsformio

解决方案


推荐阅读