Form Renderer

The most important aspect of the Form.io platform is the ability to render a form dynamically within your application and then hook that form up to the REST API provided by the Form.io API platform. The Form Renderer within Form.io provides this capability.

Installation

To install the form renderer within your application, you must first add the FormioModule as a dependency within your application as follows.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormioModule } from 'ng2-formio';
import { MainComponent } from './main';

@NgModule({
  imports: [
    BrowserModule,
    FormioModule
  ],
  declarations: [
    MainComponent
  ],
  providers: [],
  bootstrap: [
    MainComponent
  ]
})
export class AppModule {}

Once you have the module installed, you can now include the <formio> directive within your Modules template like the following.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<formio src="https://examples.form.io/example"></formio>'
})
export class MainComponent {}

This provides a way to render the form within your application.

Handling Submissions

Once you have the form rendered within your application, the next thing you will probably want to do is handle the submission of that form so that you can do something with the submission. You can do this by binding an event handler onto the <formio> component and then provide a callback function within your component like so.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<formio src="https://examples.form.io/example" (submit)="onSubmit()"></formio>'
})
export class MainComponent {
  onSubmit(submission: any) {
    console.log(submission); // This will print out the full submission from Form.io API.
  }
}