Angular formio自定义组件

Question

我已经按照formio文档创建了自定义组件，但我只是一个初学者，所以我不能让它工作。我想创建自定义组件来实现此页面

​

​

我想创建自定义组件，如添加新的卡，你可以选择该卡的孩子，如视频，或图像，输入等基本上我想实现谷歌表单生成器我发现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);

这是来之不易的知识，希望能对别人有所帮助。