Form Builder

The Form Builder component is able to render a Form Builder into your application using the following syntax.

<form-builder [form]="{
  components: []
}"></form-builder>

This is able to render the following form builder into your application.

Inputs

The following inputs are accepted.

Name	Type	Description
form	Object	The default form object to start out with in the form builder interface.
options	FormioOptions	The Options that will be passed to the FormBuilder class in the core renderer.

Outputs

The following outputs are accepted.

Name	Description
change	Tells you when the form builder values have changed.

Example

The following will render a form builder into your application and also show all of the schema of the form as it is built.

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

@Component({
  ...
  ...
})
export class BuilderComponent {
  @ViewChild('json') jsonElement?: ElementRef;
  public form: Object = {
    components: []
  };

  onChange(event) {
    this.jsonElement.nativeElement.innerHTML = '';
    this.jsonElement.nativeElement.appendChild(document.createTextNode(JSON.stringify(event.form, null, 4)));
  }
}