formComponents - typing useFormContext

[chrislicodes]

Hi there,

I need to create a reusable form component that includes several nested sub-forms. The reason behind this is that I have a deeply nested object structure, and the same interface can appear at multiple paths within the object.

Is it possible to type the useFormContext so that it expects the type MainObject?

For instance:

export type SomeSubObjectPath = {
  [K in DeepKeys<MainObject>]: DeepValue<MainObject, K> extends SomeSubObject
    ? K
    : never;
}[DeepKeys<MainObject>];

export const SomeSubObjectController = ({
  path,
}: {
  path: SomeSubObjectPath;
}) => {
  // This doesn't work because the FieldApi interface expects 9–10 arguments.
  const form = useFormContext<MainObject>();

  return (
    <div>
      <form.Field name={`${path}.groups`} mode="array">
        {(field) => (
          <div>
            {field.state.value.map((_, i) => {
              // ...
            })}
          </div>
        )}
      </form.Field>
    </div>
  );
};

Any pointers or suggestions would be greatly appreciated. Thanks!

Related: #1175