Nested Forms

[dan-cooke]

Hi there,

Thanks as always for the great library -

I was wondering if there is any sensible pattern for nesting forms:

The use case is as follows: we need to have an overarching onSubmit form, but then we need a more complex onChange form to validate as the user types.

<FormProvider mode="onSubmit">
     <Form>
         ... various simple inputs
     </Form>

     <FormProvider mode="onChange">     
      </FormProvider>

</FormProvider>

Out of the box there are a few issues with this

1. useForm props need to be combined, ie. the parent defaultValues should be injected into the child etc.
2. handleSubmit on the root form, does not account for validation errors in thte nested form.

I've been attempting to engineer my own solution by adding a custom FormProvider and keeping track of childForms - then overriding the handleSubmit that the parent form uses.

It looks something like this

const useSetupRootForm = (
  methods: UseFormReturn<FieldValues>,
  rootFormContext: RootFormContextType | null
) => {
  const handleSubmit: UseFormHandleSubmit<FieldValues> = useCallback(
    (rootOnValid, rootOnInvalid) => {
      const children = rootFormContext?.childForms;

      let onValid = rootOnValid;
      const onInvalid = rootOnInvalid;

      if (children) {
        let numberOfValidChildForms = 0;
        onValid = (data) => {
          numberOfValidChildForms++;
          if (numberOfValidChildForms === Object.keys(children).length) {
            return methods.handleSubmit(rootOnValid, rootOnInvalid);
          }
        };
        Object.values(children).forEach((childForm) => {
          childForm.handleSubmit(onValid);
        });
      }

      return methods.handleSubmit(onValid, onInvalid);
    },
    [methods, rootFormContext?.childForms]
  );

  return {
    handleSubmit,
  };
};

I've been working on this convoluted solution for a few days, but it seems I've hit a dead end - as handleSubmit is not async, there is no way for me to call the children handleSubmits while we await the parent handleSubmit

I feel that I am over-engineering this, so if anyone has any advice that would be great.

[slugmandrew]

Hey dude,

I'm no expert (just another user) but this does sound a little like a code smell.

Is the only reason for the nested forms to validate onChange instead of onSubmit? If so, then would it not make sense to manually call the validation on those fields manually as they change? I did something similar where I call trigger() on a single field based on when another one changes.

Either way, I feel like there's a better solution if you use a single form and try to control the parts of it, rather than nesting forms like this. It's not something I've seen in any of the examples.

[dan-cooke]

I could smell this for a while- but I just put some plugs up my nose and ignored it lol.

Thanks for pointing out trigger.

This will simplify my implementation massively!

[bluebill1049]

Thank you @slugmandrew 🙏

[slugmandrew]

Wow, got it in one! You're both very welcome 🙂