-
-
Notifications
You must be signed in to change notification settings - Fork 339
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Missing error when validating via form options instead of via field #678
Comments
Away from a computer right now. Are you checking against the field errors or the form errors. This is a bit confusing, but form validation like this doesn't set field errors, it sets form errors |
Yep, was using the
You're right, the validation message exists on
I have to agree that this is confusing, as one would always need to look for errors in multiple places. Helper component for reference: function FieldInfo({ field }: { field: FieldApi<any, any, any, any> }) {
// This is empty when using the "form" validator (but not for the "field" validator)
console.log("field touchedErrors", field.state.meta.touchedErrors);
// ...but not empty for the form's `errors`
console.log("form errors", field.form.state.errors);
return (
<>
{field.state.meta.touchedErrors.length === 0 ? (
"No errors"
) : field.state.meta.touchedErrors ? (
<em>{field.state.meta.touchedErrors}</em>
) : null}
</>
);
} |
FWIW we're actually planning on removing Also, we're gonna make the story of form->field validation easier here: Closing as both are a WIP, but thanks for the feedback and detailed report 😇 |
Describe the bug
When using the (Zod) validator on the form options (passing to
useForm
) instead of using it directly on the field, there is no entry in theerrors
/touchedErrors
array.Works (directly on field)
Doesn't work (passing to
useForm
)Your minimal, reproducible example
https://codesandbox.io/p/devbox/nifty-voice-rzmgm9?file=%2Fsrc%2Findex.tsx
Steps to reproduce
There are two forms in the repro example.
The first form uses a validator on the
form.Field
. Everything works as expected.The second form uses a validator on the form options. Now, there is no error.
Expected behavior
Validation errors are put on the
errors
/touchedErrors
field, no matter where validation took place.How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
TanStack Form adapter
react-form
TanStack Form version
v0.19.1
TypeScript version
v5.4.5
Additional context
No response
The text was updated successfully, but these errors were encountered: