T
TanStack•2mo ago
flat-fuchsia

Cannot get the same form instance with the same type.

Hello all. I set up the form the way it is described in the docs using createFormHook and createFormHookContexts. However my form is way to big. So on the go I decided to split into sections, asuming that I can get form from context. so the structure is like that: However when I try to get form instance on the section component level it is not typed the way it should be and this leads to inability to use it there due to linter and other errors. Maybe someone faced similar issue and knows how to takle it?
No description
No description
No description
No description
No description
No description
10 Replies
fascinating-indigo
fascinating-indigo•2mo ago
Form components are available to all forms, so while it currently is too strict (doesn't have AppField), it wouldn't know what fields truly exist or don't. If it's a single form you'd like to split up into multiple files, you should use withForm instead, using a shared formOptions configuration
flat-fuchsia
flat-fuchsiaOP•2mo ago
Luca, thank you for help. Unfortunately this idea does not solve my issue completely. Once I make my section component to use withForm, everything is ok inside it. However when I am passing from instance into it - it has wrong type, despite the fact I am passing the same form my section is used in.
No description
fascinating-indigo
fascinating-indigo•2mo ago
could you share the code snippet of your useAppForm as well as the withForm options?
flat-fuchsia
flat-fuchsiaOP•2mo ago
nvm. my bad. I found the issue. thanks a lot will try this out!
fascinating-indigo
fascinating-indigo•2mo ago
👍 also, looking at the image you sent: if source should always equal the name of the field, you can do so by using field.name
flat-fuchsia
flat-fuchsiaOP•2mo ago
Oh yeah, I know that and my plan is get rid of source. I am moving to tanstack from react hook while still having react-admin around. Before source was necessary but once I am done - it will go hopefully😀 @Luca | LeCarbonator maybe you can help with another interesting thing. So I made the setup as you mentioned with withForm, but now the only validators that are running are the form level validators. If I have field level validator it is just skipped.
fascinating-indigo
fascinating-indigo•2mo ago
strange. What validators are you using? is the field mounted during validation?
flat-fuchsia
flat-fuchsiaOP•2mo ago
Yeah. It was aparently wrong placement of validators. But I need to admit - I have way to huge and tricky from even from composition perspective thank you!
fascinating-indigo
fascinating-indigo•2mo ago
consider using formOptions to keep it consistent 
// shared-file.ts
const formConfig = formOptions({
  defaultValues: { /* ... */ },
  validators: { /* ... */ }
})

// main.ts
const form = useAppForm({
  ...formConfig,
  onSubmit: () => { /* ... */ }
})

// section.ts
const Section = withForm({
  ...formConfig,
  render: function Render(props) { /* ... */ }
})
// shared-file.ts
const formConfig = formOptions({
  defaultValues: { /* ... */ },
  validators: { /* ... */ }
})

// main.ts
const form = useAppForm({
  ...formConfig,
  onSubmit: () => { /* ... */ }
})

// section.ts
const Section = withForm({
  ...formConfig,
  render: function Render(props) { /* ... */ }
})
flat-fuchsia
flat-fuchsiaOP•2mo ago
Cool, I made it like that but also I need field level validation, and as far as I see the options validators will run on form level. Plus my default values are computed sometimes based on react hooks, therefor I made a getter function to get formConfig.

Did you find this page helpful?