在Formio Builder上添加自定义属性

Question

我想创建类似这样的东西

我想创建一个卡片，其中包含诸如法拉第，iframe之类的标签，并且还包含输入。我已经成功将自定义组件添加到了表单生成器，但是我需要为新组件传递一个属性。例如，我有一个用于iframe的组件，但我需要将URL传递给该组件，有人知道吗？

这是我对组件之一的代码

<div style="width: 100%;margin-top: 20px;">
          <nb-card>
            <nb-card-body class="myIframe">
              <iframe src="https://www.youtube.com/embed/gSfc4GhlZ44" frameborder="0" webkitallowfullscreen
                mozallowfullscreen allowfullscreen></iframe>
            </nb-card-body>
          </nb-card>
        </div>

我希望iframe src是动态的，用户可以将其网址插入该属性。我感谢您的帮助

编辑

这是我的生成器html代码

    <form-builder [form]="form" (change)="onChange($event)"></form-builder>
<div class="well jsonviewer">
    <pre id="json"><code class="language-json" #json></code></pre>
</div>

和builder.ts

export class StepBuilderComponent {

  @ViewChild('json', {static: false}) jsonElement?: ElementRef;
  public form: Object = {
    components: []
  };
  onChange(event) {
    this.jsonElement.nativeElement.innerHTML = '';
    this.jsonElement.nativeElement.appendChild(document.createTextNode(JSON.stringify(event.form, null, 4)));
  }

}