Any good examples of large complex forms?

[nareshbhatia]

Are there any common patterns to organize large forms, e.g. a checkout form with multiple sections (buyer's contact information, shipping address, payment methods etc.). How can we modularize such large forms into "subforms" as standalone components? For example, a reusable address subform with its own validations which can be embedded multiple times into a larger form, e.g. billing address vs. shipping address.

[stranzhay]

If I'm understanding your question, I think you should just be able to wrap the parent form in a FormProvider https://react-hook-form.com/api/#useFormContext and useFormContext in your reusable form

[nareshbhatia]

Thank you for the tip @strange1120. I was able to use FormProvider and useFormContext to break up the form into smaller "subforms". There are a couple of other things that I could use help with:

1. How to modularize a large schema? You can look at my sample app & its schema here. As you can see, this will keep on growing.
2. How to make a subform reusable? For example, I have an address subform here. This is meant to be a generic address form, however I have currently hard-coded the name fields with instance-specific names, e.g. shippingAddress.company. The idea is to be able to reuse it for other address instances, e.g. billing address.

Other than that, I would love to have someone do a good code review and suggest improvements. For example, I learned how to create dynamic schemas using yup.lazy(). I use it to switch between payment types (credit card vs. bank account). The code is here. Also I created some wrapper components for text input, radio buttons and checkboxes to show validation errors more easily. That code is here.

[nareshbhatia]

Quick update: I was able to solve issue #2 (reusable subform) by passing in the parent name via a prop. See here

[nareshbhatia]

Another update: I have now created Storybook stories to show how sub-forms can be tested independently. See here.

[K1vs]

To complement the idea of nareshbhatia for issue #2:

Typed helper hook for subform, this increases the comfort of use in the IDE.

import {
  FieldValues,
  Path,
  RegisterOptions,
  useFormContext,
} from "react-hook-form";

const useFormSubContext = <TSubForm extends FieldValues>(
  contextPath: string
) => {
  const { register, ...methods } = useFormContext<TSubForm>();
  const subregister = <TFieldName extends Path<TSubForm>>(
    property: TFieldName,
    options?: RegisterOptions<TSubForm, TFieldName>
  ) => {
    const path = `${contextPath}.${property.toString()}`;
    return register(path as any, options);
  };

  return {
    register: subregister,
    ...methods,
  };
};

export default useFormSubContext;

If we have the following types:

interface DemoClass{
  foo: string,
  sub: DemoSubClass
}

interface DemoSubClass{
  bar: string 
}

then in sub form:

//contextPath:string - passed by props
const { register } = useFormSubContext<DemoSubClass>(contextPath);
...

<!--IDE can help with fields names and ts compiller check 'bar' is property of DemoSubClass--> 
<input type="text" {...register("bar")} /> 

In the parent form you need to use the FormProvider as usual.

[NixBiks]

Neat little solution.

How to use this together with useFieldArray though?