metropolitan-bronze

pass tanstack form as props to a component with properly typing

how do i pass a tanstackForm as a prop to another component with correct typing? i did this but i get typescript errors because well these are not compatible is there a way to type the withForm without having to guess what all the 14 type fields are?

AppFieldExtendedReactFormApi<{ movements: ListInventoryRegisterAndMovementsByIDResponse; }, FormValidateOrFn<{ movements: ListInventoryRegisterAndMovementsByIDResponse; }> | undefined, ... 11 more ..., { ...; }>' is not assignable to type 'AppFieldExtendedReactFormApi<any, any, any, FormAsyncValidateOrFn<unknown> | undefined, any, FormAsyncValidateOrFn<unknown> | undefined, any, FormAsyncValidateOrFn<unknown> | undefined, ... 5 more ..., { ...; }>

AppFieldExtendedReactFormApi<{ movements: ListInventoryRegisterAndMovementsByIDResponse; }, FormValidateOrFn<{ movements: ListInventoryRegisterAndMovementsByIDResponse; }> | undefined, ... 11 more ..., { ...; }>' is not assignable to type 'AppFieldExtendedReactFormApi<any, any, any, FormAsyncValidateOrFn<unknown> | undefined, any, FormAsyncValidateOrFn<unknown> | undefined, any, FormAsyncValidateOrFn<unknown> | undefined, ... 5 more ..., { ...; }>

export function InventoryRegister({ data }: { data: ListInventoryRegisterAndMovementsByIDResponse }) {

  const tanForm = useAppForm(
    {
      defaultValues: {
        movements: data
      },
    }
  )

  return (
    <div className="flex flex-col space-y-4">
      <InventoryRegisterCard register={data.register} />
      <InventoryMovementTable movements={data.movements} form={tanForm} />
    </div>
  )
}

export function InventoryRegister({ data }: { data: ListInventoryRegisterAndMovementsByIDResponse }) {

  const tanForm = useAppForm(
    {
      defaultValues: {
        movements: data
      },
    }
  )

  return (
    <div className="flex flex-col space-y-4">
      <InventoryRegisterCard register={data.register} />
      <InventoryMovementTable movements={data.movements} form={tanForm} />
    </div>
  )
}

export const InventoryMovementTable = withForm({
  props: {
  },
  render: function Render({ form }) {...}
})

export const InventoryMovementTable = withForm({
  props: {
  },
  render: function Render({ form }) {...}
})

9 Replies

inland-turquoise•2mo ago

It seems you came from react Hook Form.

metropolitan-bronzeOP•2mo ago

what do you mean by that?

inland-turquoise•2mo ago

Because you are trying to use a pattern that is usual on React Hook Form, but is not the way of TanStack form

inland-turquoise•2mo ago

Maybe what you are trying to achieve is possible through this: https://tanstack.com/form/latest/docs/framework/react/guides/form-composition

Form Composition | TanStack Form React Docs

A common criticism of TanStack Form is its verbosity out-of-the-box. While this can be useful for educational purposes helping enforce understanding our APIs it's not ideal in production use cases. As...

metropolitan-bronzeOP•2mo ago

i am currently using the withForm function that the docs mention, but the only way to get typesafety is creating a global formOpts that i can import into the form child component (sharing image cuz those are a lot of lines of code). idk what would be the way to achieve something similar to this following the tanstack form patterns

stormy-gold•2mo ago

having a shared formOptions is the recommended pattern if you have multiple files with the same form

metropolitan-bronzeOP•2mo ago

okay thanks, thats fine and all, but the default values i have for the form are fetched from an api, so, how can i set the options to have those default values, and also export it to another file?

stormy-gold•2mo ago

after spreading the form options, you can overwrite them too if there was a conflict between types, it'll let you know unlike withFieldGroup, withForm also doesn't use any of the defaultValues at runtime, so you can assert too if you want my recommendation is to have an 'empty' set of values while the query is pending, and accessing / storing that in the formOptions

metropolitan-bronzeOP•2mo ago

thank you so much

Gaming

Programming

pass tanstack form as props to a component with properly typing

Did you find this page helpful?