Forms & Form Builder#

Problem:

The app has a lot of forms that require a lot of fields and validation.
Some of the forms are dynamic and can be changed by the user.

Solution:

Creating a form require multiple steps the first one is

1. defined the validation scheme
2. then create the form fields
3. then create the form + do the styling

So We created a form builder that will help me create the form in a dynamic way. The form builder will take the validation scheme and will generate the form.

Example:

Usually that's what we have to do when creating a form with validation using react-hook-form and yup

import { useForm } from "react-hook-form"
import { yupResolver } from "@hookform/resolvers/yup"
import * as yup from "yup"

const schema = yup
  .object({
    firstName: yup.string().required(),
    age: yup.number().positive().integer().required(),
  })
  .required()

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  })
  const onSubmit = (data) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <p>{errors.firstName?.message}</p>

      <input {...register("age")} />
      <p>{errors.age?.message}</p>

      <input type="submit" />
    </form>
  )
}

But with the form builder we can do it like this

import { useForm } from "react-hook-form"
import { yupResolver } from "@hookform/resolvers/yup"
import * as yup from "yup"

const schema = yup
  .object({
    firstName: yup.string().required().renderInput(FormBuilderInput.TEXT,{}),
    age: yup.number().positive().integer().required().renderInput(FormBuilderInput.TEXT,{}),
  })
  .required()

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  })
  const onSubmit = (data) => console.log(data)

  return (
      <FormBuilder
        header={<button onClick={() => methods.handleSubmit(submit)()} />}
        methods={methods}
        formSchema={schema}
      />
  )
}

Render Input:

Specify the type of input that you want to render

const schema = yup
  .object({
    firstName: yup.string().required().renderInput(FormBuilderInput.TEXT,{}),
    dob: yup.date().required().renderInput(FormBuilderInput.DATE,{}),
    gender: yup.date().required().renderInput(FormBuilderInput.AUTOCOMPLETE,{
    inputProps: { options: []}})
    })
  .required()

you can also pass the props to the input and no need to add label for each input it will be added automatically fron the schema label

const schema = yup
  .object({
    firstName: yup.string().required().label("First Name").renderInput(FormBuilderInput.TEXT,{
    inputProps: { style: { color: "red" }}}),
    })
  .required()

Render Custom:

didn't like the default input? you can create your own input and pass it to the form builder

const schema = yup
  .object({
    firstName: yup.string().required().label("First Name")
    .renderCustom(param => (<MyCustomField {...param}  />)
 }).required()

renderCustom params

renderCustom(({ field: { onChange, onBlur, value, ref } }) => (
<ReactDatePicker
onChange={onChange} // send value to hook form
onBlur={onBlur} // notify when input is touched/blur
selected={value}
/>
))
                            
                            

all the feature of react-hook-form are accessible by form Builder.
Read More About Controller Props react-hook-form Controller

Form Builder Has more:

There is many other features that I can explain but it'll take a lot of time it's a very large library You can have nested forms, overwrite the header and footer, overwrite the form sections and style, add extra sections and more