How to get field error when using createFormFactory with Nextjs with App router?
Hi
I'm switching from
react-hook-form to @tanstack/react-form and I'm trying to understand how the validation works with zod and creatFormFactory. I've followed this example: https://tanstack.com/form/latest/docs/framework/react/guides/ssr
I've created this CodeSandbox
Right now I do get validation but not what I would expect. I was expecting to have a more granular validation.
I have a form with two fields, both of them are required, whenever the onBlur is invoked in an input and it passes the validation, the form state becomes invalid (canSubmit becomes false) because the other input is required.
This behaviour is a bit strange because the form shouldn't become invalid since the other input isn't touched so the validation. It seems like validators: { onBlur: formExampleSchema }, }, runs for all the fields.
Is there a way to get validation only if the field is touched?
Another point I'd like to understand is how to get error messages for each field because right now const formErrors = useStore((formState) => formState.errors); simply returns an arrays of errors, there's no way to map the error message with the field.
If I try to access the error message on a field with field.state.meta.touchedErrors I don't get any error, it's like the field is not on error.
Is there a way with this approach to have a more granular validation and only set the form to invalid if all the required fields have been touched and don't pass the validation?
How can I access the error message from the field?
Thank youNext.js Usage | TanStack Form Docs
Before reading this guide, it's suggested you understand how React Server Components and React Server Actions work. Check out this blog series for more information
1 Reply
xenial-blackOP•2y ago
Hi @crutchcorn,
Sorry to ping you , Is this something that could be achievable?
Thanks