Reuse form components on different forms

[guy-ecton]

When the examples use useFormContext() in a custom form input/component, it makes the component essentially tied to a specific form.
The other option to write a reusable custom form component is to pass the form as a prop.

I though I could do away with defining a generic V that specifies the current component's fields, but i get typescript errors:

interface BirthdayFields {
  day: string | number
}

function Birthday<V extends {birthday: BirthdayFields}>({form}: {form: UseFormReturnType<V>}) {
 form.setFieldValue('birthday.day', 12)
//                                  ^ Argument of type 'number' is not assignable to parameter of type '"birthday" extends keyof V ? "day" extends keyof V[keyof V & "birthday"] ? V[keyof V & "birthday"][keyof V[keyof V & "birthday"] & "day"] : unknown : unknown'.
}

(the same code works when using useFormContext())

So, how to smartly build reusable form components with mantine form?

Sources:

• https://mantine.dev/form/create-form-context/#store-context-in-separate-file
• https://mantine.dev/form/use-form/#useformreturntype
• TS Playground

[ryuhangyeong]

#7195

Is the question similar to this question?

[guy-ecton]

looks like it

[rtivital]

There is no good way of implementing this, you can either use UseFormReturnType<any> or make decision not to use such fields

[guy-ecton]

Yes, I ended up using any in the generic components (like Wizard...) and having more concrete typing on the inputs themselves.

[jvllmr]

A similar pattern is now possible with Mantine v9. See: #8198