eastern-cyan

Reactivity & form.Subscribe

I think this is a super basic question, but when I read the reactivity docs and see an example like pictured I know how to use the snippets with 'const...'. But how are you doing things like <form.Subscribe...? If I type that in VS code it doesn't like it at all whether inside our outside my render. There is no <form.Subscribe. I'm missing something fundamental here that I think will unlock much better use of the documentation. Help greatly appreciated. ❤️

8 Replies

wise-white•9mo ago

export default function App() {
  const form = useForm({ // <---- (1) that's where "form" comes from…
    defaultValues: {
      firstName: '',
      lastName: '',
    },
    onSubmit: async ({ value }) => {
      // Do something with form data
      console.log(value)
    },
  })

  return <form.Subscribe … />  // <----- (2) that we're using here
}

export default function App() {
  const form = useForm({ // <---- (1) that's where "form" comes from…
    defaultValues: {
      firstName: '',
      lastName: '',
    },
    onSubmit: async ({ value }) => {
      // Do something with form data
      console.log(value)
    },
  })

  return <form.Subscribe … />  // <----- (2) that we're using here
}

eastern-cyanOP•9mo ago

ok the plot thickens then. This works in my main component where form is being defined as shown. But it does not work when I pass form down to a child component.

eastern-cyanOP•9mo ago

This is how I'm defining form in the child component

wise-white•9mo ago

Should be a type issue… Try with ReactFormExtendedApi You'll probably don't want to use the ZodValidator for anything new anymore as it's deprecated and will be removed

eastern-cyanOP•9mo ago

This might be the solution .... ah you beat me to it!

eastern-cyanOP•9mo ago

I'll try yanking ZodValidator out. Is there any PR or explanation out there? I'm expecting some things to break when I removei t

wise-white•9mo ago

https://github.com/TanStack/form/releases from v0.40.0 on The docs have been updated as well, in short: Theres this thing called "Standard Schema" now and if you use Zod you do not need an adapter anymore for Tanstack Form https://tanstack.com/form/latest/docs/framework/react/guides/validation#validation-through-schema-libraries

eastern-cyanOP•9mo ago

Thank you @ksgn !

Gaming

Programming

Reactivity & form.Subscribe

Did you find this page helpful?