Angular Custom Form Builder

Readme.md

Some helpful information

• http://formio.github.io/formio.js/app/examples/custombuilder.html
• http://formio.github.io/formio.js/app/builder
• http://formio.github.io/formio.js/app/sdk
• Example Code: https://raw.githubusercontent.com/formio/formio.js/master/app/builder.md

formbuilder.html

<label for="title">Title</label>
<input name="title" id="title" type="textfield" class="form-control" /><br/>
<form-builder [form]="form" [options]="options"></form-builder>
<br/>
<button class="btn btn-primary" (click)="saveForm($event)">Save Form</button>

formbuilder.ts

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { FormioAuthService } from 'angular-formio/auth';
import {FormBuilderComponent, FormioAppConfig} from 'angular-formio';
import Formio from 'formiojs/Formio';

@Component({
  templateUrl: './formbuilder.html'
})
export class FormBuilderComponent implements AfterViewInit {
  public form: object = {components: []};
  public options: any = {
    builder: {
      basic: false,
      advanced: false,
      data: false,
      custom: {
        title: 'Custom Components',
        default: true,
        weight: 10,
        components: {
          firstName: {
            title: 'First Name',
            key: 'firstName',
            icon: 'fa fa-terminal',
            schema: {
              label: 'First Name',
              type: 'textfield',
              key: 'firstName',
              input: true
            }
          },
          lastName: {
            title: 'Last Name',
            key: 'lastName',
            icon: 'fa fa-terminal',
            schema: {
              label: 'Last Name',
              type: 'textfield',
              key: 'lastName',
              input: true
            }
          },
          email: {
            title: 'Email',
            key: 'email',
            icon: 'fa fa-at',
            schema: {
              label: 'Email',
              type: 'email',
              key: 'email',
              input: true
            }
          }
        }
      }
    }
  };
  public builder: any = null;
  @ViewChild(FormBuilderComponent) formBuilder: FormBuilderComponent;

  constructor(public auth: FormioAuthService, public config: FormioAppConfig) { }

  ngAfterViewInit() {
    this.formBuilder.ready.then((formio) => {
      this.builder = formio;
    });
  }

  saveForm() {
    const title: string = document.getElementById('title').value;
    const form = this.builder.schema;
    form.title = title;
    form.path = title.replace(/[^A-Za-z]*/g, '').toLowerCase();
    form.name = title.replace(/[^A-Za-z]*/g, '').toLowerCase();
    (new Formio(this.config.appUrl)).saveForm(form).then(function(savedForm) {
      console.log(savedForm);
    });
  }
}