canSubmit and isValid is true by default?

[cgatian]

😕 When I build a simple form with validation and subscribe using useStore the initial values for both canSubmit and isValid is true. That seems like an odd choice for initial values, but maybe I'm missing something!

I tried adding my validator to onMount, that didn't seem to help.

const [canSubmit, isValid] = useStore(form.store, (state) => [state.canSubmit, state.isValid]);
console.log(canSubmit, isValid); // true true

https://stackblitz.com/edit/tanstack-form-4xzdhemm?file=src%2Findex.tsx&preset=node

[harry-whorlow]

[harry-whorlow]

no worries man, happy to be of use 🤟

[paulm17]

@cgatian Did this work for you? I'm not able to get it to work.

[cgatian]

Doesn't look like it's working? Updated the stackblitz. View dev tools console.
https://stackblitz.com/edit/tanstack-form-4xzdhemm?file=src%2Findex.tsx&preset=node

[paulm17]

@cgatian

I only ever get true true. I don't get the 2x true true and then 2x false false from the blitz example.

[harry-whorlow]

That's my bad... can submit is not apart of the getDefaultFormState initialisation function.

canSubmit and isValid are computed values in the initialisation of the store

[harry-whorlow]

@cgatian @paulm17 First up, sorry for the misinformation. Well, not quite—it's kind of related, but unfortunately, I didn't consider how this relates to the React adapter.

So far, my suspicions are that the form.mount() is being called, but before it can finish, the useStore is subscribing to the state of the form and logging it out. Now, I don't think this is an issue as the form is not mounted. However, I will admit I don't like the DX...

I'll continue to look into this, out of curiosity is this causing issues other than just the init values being logged? Just so I can understand the problems a little better 🤟

As a heads up I deleted my answer as I don't want to confuse anyone thinking this was solved

[cgatian]

Yes. When mounting to these props to enabling buttons there's a flash of enabled/disabled to the user.

[harry-whorlow]

@cgatian okay cool, then I will re-double my efforts.

Out of curiosity dose it work with form.Subscribe kinda like

<form.Subscribe
 selector={(state) => [state.canSubmit, state.isValid]}
 children={([canSubmit, isValid]) => (
   <form.Field>
     {(field) => (
       <burron
         disabled={ canSubmit }
         onClick={ /*do something*/ }
       />
     )}
   </form.Field>
 )}
/>

[babucarr32]

It seems like this is by design. If so, I believe it will be better if they could give the user the option to either enable or disable this behavior. I am trying to migrate our forms to this form, now that I encountered this, I don't think I can proceed anymore!

[hugo-cardoso]

Any updates on this? The form submit button should start out disabled.

[LeCarbonator]

Would checking for isPristine help as a workaround for now? Since the only way to get out of the pristine state is to trigger at least one onChange validation

[cgatian]

Thank you @LeCarbonator. This works.