setting defaultState.canSubmit to false does not work

I've set the

defaultState.canSubmit

defaultState.canSubmit

defaultState.canSubmit

defaultState.canSubmit to

false

false

false

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
  )}

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

state.isTouched

state.isTouched

state.isTouched?

setting defaultState.canSubmit to false does not work

Similar Threads

Similar Threads

Similar Threads