Creating Dynamic Forms using Form.io in Angular Application

What’s FormIO?

Form.io is a form management application that simplifies the creation of dynamic forms through a drag-and-drop interface. It generates a JSON schema for the forms, which can be easily embedded within web applications using Formio renderer component. This allows for a seamless integration of form capabilities into your applications, offering flexibility and ease of use in managing and collecting data.

Getting Started

Step 1 —

To integrate Form.io into your Angular application, you’ll need to use the angular-formio library. This library provides Angular components and services for working with Form.io forms. Run the command shown below to install the library in your angular application:

npm i angular-formio

Step 2 —

Import FormioModule in the app.module file

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormioModule } from 'angular-formio';

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

Step 3: Adding Form Builder to create dynamic form —

The angular-formio library offers a form-builder component, which allows you to present a user-friendly drag-and-drop interface for creating forms. You can include it in your component’s template file, as demonstrated below:

<form-builder
  [form]="formJSON"
  (change)="handleFormChange($event)"
></form-builder>

In this context, form is initialized with the default JSON structure of type FormioForm, which provides the starting point for the form builder. The variable formJSON is used to supply the initial form data.

import { FormioForm } from 'angular-formio';
..

@Component({
  ...
  ...
})
export class FormBuilderComponent {
  formJSON: FormioForm = { display: 'form', components: [] };

  handleFormChange(event) {
   console.log(event.form);
  }
}

The form builder in Form.io enables you to design both single-page and multi-paged forms. You specify the type of form layout through the display property within the form JSON:

a. Use display: ‘form’ for single page forms as shown in the example above.

Single Page Form Builder

b. To create a multi-paged form, you can set the display property in the form JSON to 'wizard'. When you use 'wizard' as the display type, the form builder interface will allow you to add new pages to the form, as shown below:

Form Builder to create multi-paged forms

You can incorporate input fields into the form via the drag-and-drop interface, resulting in the creation of a JSON Schema. This JSON Schema can be obtained from the data emitted by the form-builder’s changeevent. As demonstrated in the FormBuilderComponent shown above, the handleFormChange method can access the generated JSON schema through event.form. You can then save this schema within your application’s state and persist it in the backend by utilizing REST APIs.

Step 4: Rendering the created form —

Now that the form has been created, and you have the corresponding JSON Schema, you can render the form for users to complete. You can accomplish this by using the formiocomponent, as demonstrated in the code snippet below:

<formio
  [form]="formJSON"
  [submission]="userResponses"
  (change)="onFeedbackChange($event)"
  (nextPage)="handleNextClick($event)" //for multi-paged forms
  (prevPage)="handlePrevClick($event)" //for multi-paged forms
  [readOnly]="readOnly"
></formio>

a. form: It takes the JSON Schema generated by the form builder. This JSON Schema defines the structure and components of the form.

b. submission: This attribute is used to pre-populate the form with default values or user responses if they have been saved in the application’s state or database. It allows you to set initial data in the form.

c. change: The change event is triggered every time a user modifies their responses within the form. It emits the user's response details in JSON format, making it useful for real-time interaction or data capture.

d. nextPage and prevPage: Triggered when a user clicks the “Next” or “Previous” buttons in multi-paged forms, allowing you to manage step-by-step navigation through the form.

e. readOnly: When set to true, this attribute disables the form inputs, preventing users from making changes to the form. It's useful for displaying a read-only view of the form.

@Component({
  ...
  ...
})
export class FormRendererComponent {
  formJSON: FormioForm = { display: 'form', components: [] };
  userResponses: { data: any } = { data: null };
  readOnly: boolean = false;

  onFeedbackChange(event) {
    this.userResponses = { data: event.data };
  }

  handleNextClick = (e) => {
    console.log(e);
  };

  handlePrevClick = (e) => {
    console.log(e);
  };
}

As demonstrated in the example provided, the data filled out by the user in the form can be captured and stored within your application’s state. In this specific case, it’s stored in the userResponses variable. This allows you to maintain and work with the user's responses within your application for various purposes, such as displaying or processing the collected data.

In conclusion, for applications that heavily rely on forms, creating complex forms using Angular can be a time-consuming process. Making any changes to the form structure can be a laborious task, requiring developers to locate the specific areas that need modification, which can take hours to implement. Form.io offers a more efficient approach by enabling the creation and rendering of dynamic forms. Modifications can be easily made using the form builder interface, and these changes can then be seamlessly integrated and rendered within the application. This simplifies the form development and maintenance process, making it a valuable tool for developers working with form-intensive applications.