The Form Builder Component is a versatile tool designed to dynamically generate forms based on JSON configuration. This allows for flexible and dynamic form creation, which can be particularly useful in scenarios where forms need to be generated based on user inputs, database configurations, or other dynamic sources.
The article is organized into the following sub-topics:
Using the Form Builder
Below are the steps to create forms using the built-in form builder.
- Import packages and component from components/molecules folder
import { FormBuilder } from "@components/molecules";
import { useForm } from "react-hook-form"; - Define the hook of React Hook Form
const form = useForm({mode: "onBlur",});
- Define the fields Array as per requirement. For instance, below code block defines fields for the Form component.
const fields =[{/*For showing multiple fields in a row*/type: "group",group: [{type: "text",name: "firstname",label: "First Name",hasNoFieldClass: true},{type: "text",name: "lastname",label: "Last Name",hasNoFieldClass: true}]},{type: "element",element: <span></span>},{type: "text",name: "email",label: "Email Address",classStyle: "userNameStyle"},{type: "dropdown",name: "gender",label: "Gender",options: [{ value: "male", label: "Male" },{ value: "female", label: "Female" },],optionLabel: 'label},{type: "password",name: "password",label: "Password"},{type: "password",name: "confirmpassword",label: "Confirm Password"}];
Refer to below Field Props Table for defining Array for fields:
Field Props Table:
Props Types Description label String Label of the field name String Generated data again name key type text
password
checkbox
group
dropdown
checkbox-group
date
component
element
autocomplete
Field will be render on the basis of type className String Styling on field options
{ label: string, value: string, name: string}If field type is dropdown, checkbox group then data will be added to field by options and name will be render as label to change label key pass optionLabel in dropdown inputmaxlength Number Restrict user to input character autocompletefilterkey String If field type is autocomplete then autoCompleteFilterKey is required to show suggestion on the basis of which data key.
Eg: data has statename, state, city then suggestion should be coming on the basis of statename then autoCompleteFilterKey is statenamedisabled Boolean To disable a field optionlabel String If field type is dropdown then data will be added to field by options and name will be render as label to change label key pass optionlabel in dropdown element React Node To pass custom element to field component React Node To pass custom component to field - Pass Fields Array to FormBuilder
<FormBuilder form={form} fields={fields} onSubmit={handleSubmit} />
Refer to below FormBuilder Props Table for passing prop to FormBuilder component:
FormBuilder Props Table:
Props Type Description form react hook form React hook form onSubmit function handler for submit fields array array of fields onDropdownChange function handler for dropdown value change onValueChange function handler for change in value of fields For more information on React hook form, please refer to the React Hook Form.
Validating Forms
The following steps outline techniques for implementing form validation.
-
Import the necessary modules from @hookform/resolvers/yup, yup, and react-hook-form
import { yupResolver } from "@hookform/resolvers/yup";import * as Yup from "yup";import { useForm } from "react-hook-form"; - Create a Yup validation schema for your form fields
export const signUpValidationSchema = Yup.object().shape({firstname: Yup.string().required("First Name is required"),lastname: Yup.string().required("Last Name is required"),email: Yup.string().email("Invalid email format").required("Email is required"),password: Yup.string().min(8, "Password must be at least 8 characters").required("Password is required"),confirmpassword: Yup.string().oneOf([Yup.ref("password"), null], "Passwords must match").required("Confirm Password is required")});For more information on Yup validation, please refer to the Yup and React Hook Form.
- Use the useForm hook from React Hook Form and pass the Yup validation schema using yupResolver:
const form = useForm({mode: "onBlur",resolver: yupResolver(signUpValidationSchema)});
Creating Form Components
To create any form component and use FormBuilder to manage form state and validation you may write code block for newly created page. For instance, below code block displays code for creating Signup form.
import { yupResolver } from "@hookform/resolvers/yup";
import * as Yup from "yup";
import { useForm } from "react-hook-form";
import { FormBuilder } from "@components/molecules";
export const signUpValidationSchema = Yup.object().shape({
firstname: Yup.string().required("First Name is required"),
lastname: Yup.string().required("Last Name is required"),
email: Yup.string().email("Invalid email format").required("Email is required"),
password: Yup.string()
.min(8, "Password must be at least 8 characters")
.required("Password is required"),
confirmpassword: Yup.string()
.oneOf([Yup.ref("password"), null], "Passwords must match")
.required("Confirm Password is required")
});
const SignUpFormPage = ()=>{
const form = useForm({
mode: "onBlur",
resolver: yupResolver(signUpValidationSchema)
});
const fields = useMemo(
() => [
{
/*For showing multiple fields in a row*/
type: "group",
group: [
{
type: "text",
name: "firstname",
label: "First Name",
hasNoFieldClass: true
},
{
type: "text",
name: "lastname",
label: "Last Name",
hasNoFieldClass: true
}
]
},
{
type: "element",
element: <span></span>
},
{
type: "text",
name: "email",
label: "Email Address",
classStyle: "userNameStyle"
},
{
type: "dropdown",
name: "gender",
label: "Gender",
options: [
{ value: "male", label: "Male" },
{ value: "female", label: "Female" },],
optionLabel: 'label
},
{
type: "password",
name: "password",
label: "Password"
},
{
type: "password",
name: "confirmpassword",
label: "Confirm Password"
}
],
[]
);
return (<FormBuilder
onSubmit={handleSubmit}
form={form}
fields={fields}>
<SimpleButton
type="submit"
/>
</FormBuilder>);
}
Related Topics
Creating a New Page in React Project
Understanding React Folder Structure
Creating Reusable Components in React
Comments
Please sign in to leave a comment.