Nested form components

[JElgar]

Hey! I'm trying to work out how to create a form component which can be shared across multiple forms. The motivation for this being I have a form for an admin and a form for a normal user and they both need to fill out a big chunk of the same stuff. I have 2 separate schemas for these forms (admin and normal).

What I'm trying to work out is how to make a components that can be responsible for shared bits of the form. For example, both admin and regular users need to insert "Funds" so I want to have a Fund component which I can put in both.

My 2 current ideas are:

---

Having a component which takes in a path to a value of the fund schemas type.

function FundForm<
	TFieldValues extends Record<string, unknown>,
	TPath extends FieldPathByValue<TFieldValues, z.infer<typeof fundSchema>>
>(
	control: Control<TFieldValues>,
	path: TPath
) {
function Test<
	TFieldValues extends Record<string, unknown>,
	TPath extends FieldPathByValue<TFieldValues, z.infer<typeof fundSchema>>
>(
	control: Control<TFieldValues>,
	path: TPath
) {
    return <FormField
	    control={control}
	    name={`name`}
	    render={({ field }) => (
		    <FormItem>
			    <FormLabel>Fund Name</FormLabel>
			    <FormControl>
				    <Input {...field} />
			    </FormControl>
			    <FormMessage />
		    </FormItem>
	    )}
    />
}

This seems to work well in the parent forms where I can nest these and only point to a valid Fund form field. However in the component there doesn't seem to be any type support. e.g. that "name" path isn't checked at all.
I guess I can do some casting at this point but I not really sure what casting I should be doing?

This seems to be related to this issue #10669 but its not super clear to me what the current state of that is? Is it something that cannot be fixed and Im just trying to work something out which is not possible?

---

My other thought was maybe I could get a controller for the sub part of the form

export function FundForm<
	TControl extends Control<z.infer<typeof fundSchema>>,
>({ control }: {
	control: TControl,
}): JSX.Element {

This works great in the component (all the types work) but I can't work out how to get a controller for the sub section of the forms. I'm guessing that just not a thing you can do in a form but is there something along these lines which I can do?

---

Does anyone know of any alternatives which can achieve what I'm looking for (type safety in both the inputs and internal to the component)/any way I can make one of these 2 existing options work?

Thanks so much in advance!

[JElgar]

This is the best Ive got so far

const INPUT_PATH = 'INPUT_PATH_DO_NOT_ENTER_MANUALLY' as const;

export function castControlToRequiredType<
	T,
	TFieldValues extends Record<string, unknown>,
>(
	control: Control<TFieldValues>,
	path: FieldPathByValue<TFieldValues, unknown>
): {
	path: typeof INPUT_PATH,
	control: Control<{ [INPUT_PATH]: T }>
} {
	return {
		control: control as unknown as Control<{ [INPUT_PATH]: T }>,
		path: path as unknown as typeof INPUT_PATH,
	};
}

export function FundForm<
	TFieldValues extends Record<string, unknown>,
	TPath extends FieldPathByValue<TFieldValues, z.infer<typeof fundSchema>>
>(props: {
	control: Control<TFieldValues>,
	path: TPath
}) {
	const { control, path } = castControlToRequiredType<z.infer<typeof fundSchema>, TFieldValues>(props.control, props.path);