How to create Reactive Forms Using Data driven Forms in React…

Hi Guys in this article we will discuss how to create reactive forms in data driven approach using Data-driven-forms in React. Forms are undoubtedly the most basic interaction pattern between a user and a web server. From the first login to the last order confirmation, all these actions are still handled by a few HTML elements as inputs or buttons. With this high importance and the emerging power of JavaScript, forms are becoming more and more complex. Asynchronous validation and submit, dynamic elements, touch-based controls, complex multi-searchable dropdowns supporting different localization configurations and many more advanced features are slowly but surely replacing simple static HTML pages.So to discuss about this topic thoroughly we will divide this article in some segments:

1. What is data driven approach of building Forms ?
2. What are the advantages of using data-driven-forms for creating forms ?
3. What are the basic concept of data-driven-forms ?
4. Small implementation of creating forms using data-driven-forms ?
5. What is data driven approach of building Forms ?

There are plenty of ways to create reactive forms : Formik , Redux Forms, Final Forms and many others. These advanced libraries are providing all the needed features. But the issue is that the developer still has to write HTML markups and needs to use a lot of JavaScript/React code to bring all of these features to life . A data driven approach of creating reactive forms means that instead of writing HTML markup and JavaScript code, simple data is written with no dependency on the technology used. We can also call it a declarative way to write forms.

2. What are the advantages of using data-driven-forms for creating forms ?

Let us create a simple scenario of creating reactive forms .If we create a form using html markup we can fulfill all the essential things required for user interaction but when it comes to the modification of code that is instead of using error text we want to use a error symbol lots of code have to be written and modified for every small changes in our code. I hope you have already getting the picture. Under normal circumstances, each change, even if it is just a small one, can be painful with a lot of code changing. It’s manageable — in a small project it’s perfectly okay, but how about in a project with hundreds of forms? Even if you end up in a situation where we are using a small number of reusable components, this approach will not enable us to use different technologies and all forms will have to be built from scratch when we decide to change it.This is the actual time in which data driven approach of creating reactive forms comes into the picture.

3. What are the basic concept of data-driven-forms ?

So what does data driven approach of creating forms actually means ? it’s like we are converting our html tags into json format, like a key value pair format where the html becomes attribute to the right keys. And most of these keys are the same. The name attribute becomes name, the type is type and the label is label. The component is the name of a component from a mapper . Keys are simple and self-explanatory. You don’t have to know anything about HTML or React and you are still able to write your own complex forms. Of course, there are some flaws that are difficult to handle by only storing information in JSON. For example, for each submit action we are still using a separate coded function, as each submit action is different. But if your team has designed its API well, you can store the API endpoint in the schema too and use it in a generic way.

Data driven forms is a Open source library ,It is a React module that basically handles all features you could want from a standard web form.Data Driven Forms consists of two separate components: a form renderer and a mapper. The form renderer is all provided by the Data Driven Forms and its responsibility is to parse the data into the form and provide all the functionality, so all forms behave the same. The mapper is what the name suggests. It is a set of components which maps the provided functionality (through passed props) to React components.

So what is actually happening inside ? FormRenderer is the component, which converts your data into the form. There are only four required props: schema is the JSON data with specific format, formFieldsMapper is a set of components which creates the form elements and has access to the form state with an ability to change it, layoutMapper is a set of a few specific components like a form wrapper or a button, which cannot be rendered in the form from the data and cannot change the form. Both of these mappers are bundled together. The last prop is an onSubmit, which is just a function, that is called after pressing Enter in the form or pressing the Submit button. onCancel ,is another function ,that is called after pressing the Cancel Button in the form. There are many other properties of data driven forms which can be used. All of those are mentioned in the documentation, here is the link :

Data driven forms

It’s really a nice documentation and self explanatory. So we are done with theoretical part let’s start coding now.

4. Small implementation of creating forms using data-driven-forms ?

So we are creating a interactive forms using data-driven forms it’s having a stepper which we have imported from material ui ,The form is having two section , first section is having fields for personal details and we have also added validation there. In the second section we have added build-in components means we are having three tabs for movies,shopping sites and games having different types of fields.The motive behind using different types of fields is to utilize the data-driven-forms features fully to understand the concept better.After clicking on Submit button in first section we will go to the second section of our form and after clicking on Submit button in second section we will get an alert message having all the fields details .After we click on the cancel button we will go in the previous section of our form. So lets get started .First we will see the folder structure of our application:

Folder Structure

Basically this folder structure is the structure which we get directly from create-react-app . To get the basic structure we just have to run

npx create-react-app <application name > in the terminal of the VSCode. After that we have installed npm packages like @data-driven-forms/mui-component-mapper,@data-driven-forms/react-form-renderer,@material-ui/core and @material-ui/icons. To install those npm we will run the following command on the VSCode terminal:

npm i @data-driven-forms/mui-component-mapper @data-driven-forms/react-form-renderer @material-ui/core @material-ui/icons

data-driven-forms is the main package which is used to design data-driven forms , mui-component-mapper is used to create components which creates the form elements and has access to the form state with an ability to change it and it is also used to create the structure or layout of the form. react-form-renderer is used to create schema of the form with types and validation criteria etc. Mainly data-driven-forms uses material-ui icons which we will get from material-ui/icons ,from material-ui/core we are importing the stepper of our form. Now App.js is the file which acts as the root element of our application. We added the FormComponent.js file inside the src folder. It is the actual form rendering in our application.So let’s start with the App.js file:

App.js

In App.js we have rendered FormComponent component .It is the main component .Now let’s see the FormComponent file:

FormComponent.js

FormComponent.js

FormComponent.js

FormComponent.js

FormComponent.js

FormComponent.js

FormComponent.js

FormComponent.js

In FormComponent.js we are importing Stepper ,Step and StepLabel from ‘@material-ui’ , FormRenderer , componentTypes and validatorTypes from react-form-renderer , formFieldMapper,layoutMapper from mui-component-mapper.Inside our class Component FormComponent we have predefined several states like step which is used to store the step or category of the form ,activeStep is used to check the status to the step for the stepper,steps contains the array containing labels of our stepper, onSubmit is the function which is used to handle onSubmit event of our form. schema is the field schema of the 1st Section of our form .We have set component to ‘sub-form’, title to Section-1 ,description to ‘This is the initial Part of Your Form”and name to ‘sub-form-1’, these are the form details which are used to render in the DOM ,fields is an array having all the fields of that form so our Form is having several fields like plain-text ,text-fields,date-picker etc.Validate contains all the validation we want to add to that specific field of our form.Similarly schema1 is the field schema of the 2nd Section of our form. We can see that we have set component to tab , data-driven-forms is actually using material-ui component so if we use tabs as component it will render a material ui tabs component. tabs is the tab container which is having 3 tabs ,those 3 tabs are defined in the fields parameter. In Movies tab item we have used text fields, checkbox we have also set the options for checkbox. In Games tab item we have used text fields and radio button having all the options. In Shopping Site tab item we have used text field, select dropdown and switch fields.Now let’s come to the render part first we have created a div and inside that we have placed our Stepper and FormRenderer component. Stepper is a material ui component, activeStep determine the active step after that we are iterating through steps and printing the stepLabel of the stepper. There are some function for the stepper to handle the functionality such as handleNext where we increment activeStep by one, handleBack where we decrement activeStep by one . In FormRenderer we are sending schema as schema when the step is 1, means for 1st section of form and schema1 for the 2nd section of our form. We are passing onSubmit function to handle the form Submission . onSubmit function inside FormRenderer automatically get the filled value so we are sending the value to our local onSubmit function to render those value on the simple javascript alert. onCancel function is setting the step value to 1 and calling the handleBack and handleReset function to perform the reset functionality of the form and stepper.Great ! Our Form is ready .Now let’s see our form:

1st Section of our Form

Filling data on the fields

Added validation on the fields

Movie Tab in our 2nd Form Section

Games Tab in our 2nd Form Section

Shopping Site Tab in our 2n Form Section

All the datas are visible on Submitting the Form

Stepper indicating Form Submission is complete

This article serves as an introduction to the world of the data driven approach. We saw how much easy it is to create form using data-driven-approach. I am attaching my github link here for the code base of this article:

CODE:

Yudhajitadhikary/Data_driven_forms_React

Hope this article is helpful specially to those who have just started working with data driven approach of creating reactive forms in React.

HAPPY CODING…..:)