Tanstack Form + Start with isSubmitting handling?

I'm trying to use Tanstack Form + Start together. I can get it mostly working. But, I never see isSubmitting as true, so the UI doesn't show the pending state.

The example at https://github.com/TanStack/form/tree/main/examples/react/tanstack-start has this problem, as does the integration guide for Start + Form at https://tanstack.com/form/latest/docs/framework/react/guides/ssr

I think it's because they both use

  <form action={handleForm.url} method="post" encType={'multipart/form-data'}>

  <form action={handleForm.url} method="post" encType={'multipart/form-data'}>

, instead of handling submit themselves.

In fact, if the submission succeeds, the example navigates to http://localhost:3000/_server/app_utils_form_tsx--handleForm_createServerFn_handler and the user is left with just "Form has validated successfully" on the screen. Is that intended??

I can change my form submission to handleSubmit() but I'm not sure how to handle this end-to-end. I believe:
* I'm not submitting form data anymore,
* I can't use createServerValidate()

I'm not sure if this is the right path, and how it affects other things like the useStore and useLoaderData.

Could you give me a little guidance and ideally adjust the example to work fully with pending state?

TanStack•13mo ago•

16 replies

broad-emerald

Tanstack Form + Start with isSubmitting handling?

  <form action={handleForm.url} method="post" encType={'multipart/form-data'}>

  <form action={handleForm.url} method="post" encType={'multipart/form-data'}>

Tanstack Form + Start with isSubmitting handling?

Tanstack Form + Start with isSubmitting handling?

Similar Threads