angular - Angular formio 自定义组件

Question

我已经按照 formio docs 创建自定义组件，但我只是一个初学者，所以我无法让它工作。我想创建自定义组件来实现这个页面

我想创建自定义组件，例如添加新卡，您可以选择该卡的子卡，例如视频或图像，输入等。基本上我想实现谷歌表单构建器我发现 formio 是表单构建器的最佳选择，但我被这个自定义组件卡住了。我听说有人终于在 stackoverflow 中创建了自定义组件，我也在他们的问题中问他们。那么，任何人都可以帮助我吗？也许你有我要遵循的源代码，或者任何东西，非常感谢任何帮助

Answer 1

我已经成功地这样做了一段时间。

首先，在 Formio 中找到一个与您想要的功能接近的现有组件。如果你的新元素只是呈现一些非交互式的东西，那么你可以使用“HTML”组件。

这是您需要的代码：

var htmlComponent = Formio.Components.components.htmlelement; // or whatever
class MyNewComponent extends htmlComponent{

  static schema(...extend) {
    return super.schema({
          type: 'MyNewComponent',
          label: "The Default Label",
          any_other_fields: "",
    }, ...extend);

    static get builderInfo() {
      return {
        title: 'Name in the Builder',
        group: 'custom',
        icon: 'picture-o',
        weight: 5,
        schema: this.schema()
      };
    }

    render(element) {
      // Here's where you add your HTML to get put up.
      // 
      tpl += "<div ref='myref'>Hi there!</div>";
      // Note the use of the 'ref' tag, which is used later to find 
      // parts of your rendered element.
      
      // If you need to render the superclass,
      // you can do that with 
      // tpl+=super.render(element);

      // This wraps your template to give it the standard label and bulider decorations         
      return Formio.Components.components.component.prototype.render.call(this,tpl);

    }
    
    attach(element) {
      // This code is called after rendering, when the DOM has been created.
      // You can find your elements above like this:
      this.loadRefs(element, {myref: 'single'});

      var superattach = super.attach(element);
       // Here do whatever you need to attach event handlers to the dom.
      this.refs.myref.on('click',()=>{alert("hi!");});                    

      return superattach;
    }
    
    getvalue() {
      return 3; // the value this element puts into the form
    }
    // OR, depending on which component type you're basing on:
    getValueAt(index,value,flags) {}

    setValue(value) {
      // modify your DOM here to reflect that the value should be 'value'.
    };
    // OR, depending on what component type:
    getValueAt(index) {}

  }
  
  // This sets the form that pops up in the Builder when you create
  // one of these.  It is basically just a standard form, and you
  // can look at the contents of this in the debugger.
  MyNewComponent.editForm = htmlComponent.editForm;


  // Register your component to Formio
  Formio.Components.addComponent('MyNewComponent', MyNewComponent);

这是来之不易的知识。希望它可以帮助别人。