Pass partial form to component

[nehalist]

Hey there,
I've got multiple forms with different fields, where one field is always the same. Think of it like this:

const form = useForm<{
  name: string;
  translations: Array<{
    locale: string;
  }>
}>();

const form2 = useForm<{
  description: string;
  translations: Array<{
    locale: string;
  }>
}>();

const form3 = useForm<{
  foo: number;
  translations: Array<{
    locale: string;
  }>
}>();

Handling of translations is the same for all forms, so I'd like to separate these fields into a dedicated component. My current approach is:

interface TranslationFieldsProps{
  form: UseFormReturn<{
    translations: Array<{
      locale: string;
    }>
  }>;
}

export function TranslationFields({ form }: TranslationFieldsProps) {

But I do get tons of errors like Types of property watch are incompatible. when called via

<TranslationFields form={form} />

I do know that the types aren't technically the same, but since I'm only interested in the translation fields I thought that should somehow work?

Thanks and happy new year!

[BrendanC23]

This is a long-standing issue with RHF. See this issue. There are a few workarounds, but none of them are great.

This is what I'm using currently. I haven't used #12284, but it looks promising.