Add custom properties on formio builder

问题

I want to create something like this

I want to create a card which contains tags such as pharagraph, iframe, also inputs. I have successfully added custom component to my form builder but i need to pass a property for my new component. like, i have a component for iframe, but i need to pass a url to that component, anyone know how?

Here's my codefor one of the component

<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>

i want that iframe src to be dynamic and users can insert their url to that property. i appreciate any help

EDIT

Here's my builder html code

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

and 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)));
  }

}

来源：https://stackoverflow.com/questions/61097505/add-custom-properties-on-formio-builder