angular - 在 formio builder 上添加自定义属性

Question

我想创造这样的东西

我想创建一张卡片，其中包含诸如 pharagraph、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 是动态的，用户可以将他们的 url 插入到该属性中。我感谢任何帮助

编辑

这是我的构建器 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)));
  }

}