T
TanStack•13mo ago
conscious-sapphire

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
correct-apricot
correct-apricot•13mo ago
You shouldn't manually set canSubmit as it's overridden by the form
conscious-sapphire
conscious-sapphireOP•13mo ago
Shoudn't it be omitted as an option to set in the defaultState-Object then?
correct-apricot
correct-apricot•13mo 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?