How to reuse UI with different forms?

[cappuc]

Hi,

I have some sections of ui (that wraps some form fields) that are the same on both create and edit page.
Forms on create and edit page are different and I would like to be able to accept both forms (or better if I can pass only the required fields).

I tried with:

interface SectionProps {
    form: CreateForm | EditForm
}

but typescript doesn't like it: Type instantiation is excessively deep and possibly infinite.

[callmemb]

This is more or a Typescript problem than Form problem.
Looks like you have a recursive loop or overly complex objects. All i can tell you with info you given, is to simplify or split your form interfaces to smaller pieces.

[cappuc]

I know it is a typescript problem but I want to find an alternative way to solve this problem.

Here a simple example that doesn't throw the excessively deep error but types don't works anyway.
https://stackblitz.com/edit/vitejs-vite-bmwg3etg

What I would like to do is pass only the needed fields to the component but I don't know:

• how to type the field prop? using AnyFieldApi loose type safety
• how to get multiple fields from the form? Nesting multiple form.Field components should work but it's a bit ugly.

[callmemb]

Fundamental thing here is, you do not pass form instance to reuse it on different forms, It is instance of one form.
I highly encourage you to reread documentation... but if you need a shortcut, check out my last post here:
#1350

this is example of creating wrapper component for multiple forms to use and it looks similar to what you are trying to achieve.