TanStack•3y ago•

1 reply

broad-emerald

How to get field error when using createFormFactory with Nextjs with App router?

Hi
I'm switching from

react-hook-form

react-hook-form

@tanstack/react-form

@tanstack/react-form

and I'm trying to understand how the validation works with zod and

creatFormFactory

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

onBlur

is invoked in an input and it passes the validation, the form state becomes invalid (

canSubmit

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

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

  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

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 you

Next.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