Creating a dynamic form in Angular can be a powerful tool for collecting and processing user input. In this article, we’ll explore how to build a dynamic form in Angular using the Formio package. Formio is a versatile library that simplifies form management and rendering, making it an excellent choice for creating dynamic forms in Angular applications.
What is Formio?
Formio is an open-source JavaScript form builder and renderer for Angular. It enables developers to create complex forms with ease, rendering them dynamically based on JSON schemas. With Formio, you can create forms that adapt to various use cases, from simple contact forms to multi-step surveys and data collection applications.
Getting Started
To build a dynamic form in Angular using Formio, you’ll need to follow a few steps:
1. Set Up Your Angular Project
If you don’t already have an Angular project, you can create one using the Angular CLI:
ng new dynamic-form-appNavigate to your project folder:
cd dynamic-form-app2. Install Formio
Install the Formio package in your project using npm or yarn:
npm install --save @formio/angular @formio/js3. Install Bootstrap
Install the bootstrap package in your project for style using npm or yarn:
npm i --save bootstrapAdd the following line to the angular.json file
"styles": [
...
"node_modules/bootstrap/scss/bootstrap.scss",
"src/styles.scss",
...
]4. Import Formio Module
Navigate to the app.module.ts file and import FormioModule:
import { FormioModule } from '@formio/angular';
@NgModule({
declarations: [
// ...
],
imports: [
// ...
FormioModule,
],
// ...
})In the standalone component import the following:
import { FormioModule } from '@formio/angular';
@Component({
// ...
imports: [CommonModule, RouterOutlet, FormioModule],
// ...
})What is Formio Builder?
The Formio package simplifies the task of creating and configuring forms by providing a powerful form builder tool. This tool allows you to visually design your forms, drag and drop form components, and define their properties effortlessly.
5. Create Form Builder Component
In angular application, create a component that will build form. You can use FormBuilderComponent for building form:
In the builder.component.ts file, create the form object:
import { Component } from '@angular/core';
@Component({
selector: 'app-dynamic-form',
templateUrl: './dynamic-form.component.html',
styleUrls: ['./dynamic-form.component.css']
})
export class BuilderComponent {
form = {
components: []
}
}In the builder.component.html file add formio FormBuilderComponent:
<form-builder [form]="form" (change)="onBuilderChange($event)"></form-builder>Establish an “onBuilderChange” function to manage and process the form schema:
onBuilderChange(formComponents: any) {
console.log(formComponents);
// save form schema
}The following screenshot showcases the Form.io Builder, which simplifies the creation of web forms. With a user-friendly drag-and-drop interface, users can design and customize forms effortlessly.
6. Create the Form Component
In your Angular application, create a component that will render the Formio form. You can use the FormioComponent provided by the @formio/angular library to render your form using the form schema created by form builder:
In dynamic-form.component.ts file, add the form scheme to the file:
import { Component } from '@angular/core';
@Component({
selector: 'app-dynamic-form',
templateUrl: './dynamic-form.component.html',
styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent {
form: any; // Formio form object
constructor() {
// Initialize your form object using the JSON schema
this.form = {
title: 'User Form',
components: [
{
type: 'textfield',
input: true,
tableView: true,
inputType: 'text',
inputMask: '',
label: 'First Name',
key: 'firstName',
placeholder: 'Enter your first name',
prefix: '',
suffix: '',
multiple: false,
defaultValue: '',
protected: false,
unique: false,
persistent: true,
validate: {
required: true,
minLength: 2,
maxLength: 10,
pattern: '',
custom: '',
customPrivate: false,
},
},
{
type: 'textfield',
input: true,
tableView: true,
inputType: 'text',
inputMask: '',
label: 'Last Name',
key: 'lastName',
placeholder: 'Enter your last name',
prefix: '',
suffix: '',
multiple: false,
defaultValue: '',
protected: false,
unique: false,
persistent: true,
validate: {
required: true,
minLength: 2,
maxLength: 10,
pattern: '',
custom: '',
customPrivate: false,
},
},
{
input: true,
label: 'Submit',
tableView: false,
key: 'submit',
size: 'md',
leftIcon: '',
rightIcon: '',
block: false,
action: 'submit',
disableOnInvalid: true,
theme: 'primary',
type: 'button',
},
],
};
}
}In dynamic-form.component.html add FormioComponent to render the form:
<formio [form]="form" (submit)="onSubmit($event)"></formio>7. Style Your Form (Optional)
You can add CSS styling to your form to match your application’s design. Formio provides various CSS classes and customization options to style your form as needed.
8. Handle Form Submission
To handle form submissions, you can listen to the submit event on the Formio component and implement the necessary logic in your component:
onSubmit(submission: any) {
// Handle the form submission data
console.log('Form submitted with data:', submission.data);
}Result:
Conclusion
In this article, we’ve explored how to build a dynamic form in Angular using the Formio Angular package. Formio simplifies the process of creating and rendering dynamic forms based on JSON schemas, making it a powerful tool for developers working on data collection and survey applications. With the steps outlined above, you can create custom forms that adapt to various use cases in your Angular applications.
Feel free to reach out if you have any queries or encounter any problems with this code. Also, let me know how you like this article, as feedback.
Thank You!
