T
TanStack•15mo ago
xenial-black

setting defaultState.canSubmit to false does not work

I've set the defaultState.canSubmit to false but it doesn't seem to have any effect. 
const form = useForm({
  defaultState: {
    canSubmit: false,
  },
  // …
});

return (
<form.Subscribe
  selector={(state) => [state.canSubmit, state.isSubmitting]}
  children={([canSubmit, isSubmitting]) => (
    {canSubmit ? 'Ready to submit!' : 'Not ready to submit yet…'} // <-- canSubmit is true here
  )}
const form = useForm({
  defaultState: {
    canSubmit: false,
  },
  // …
});

return (
<form.Subscribe
  selector={(state) => [state.canSubmit, state.isSubmitting]}
  children={([canSubmit, isSubmitting]) => (
    {canSubmit ? 'Ready to submit!' : 'Not ready to submit yet…'} // <-- canSubmit is true here
  )}
https://stackblitz.com/edit/tanstack-form-g4x5nj?file=src%2Findex.tsx (Line 20) Is there another way to disable the submit button by default and only enable it once all fields have been touched (and are valid) - probably check state.isTouched?
3 Replies
grumpy-cyan
grumpy-cyan•15mo ago
You shouldn't manually set canSubmit as it's overridden by the form
xenial-black
xenial-blackOP•15mo ago
Shoudn't it be omitted as an option to set in the defaultState-Object then?
grumpy-cyan
grumpy-cyan•15mo ago
I think this pretty much applies for the entire defaultState object in general, it is undocumentend and shouldn't be manually changed but it is used internally and for testing purposes

Did you find this page helpful?