Skip to content
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

Closed
bennettdams opened this issue Apr 17, 2024 · 3 comments
Closed

Comments

@bennettdams
Copy link

bennettdams commented Apr 17, 2024

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 the errors/touchedErrors array.

Works (directly on field)

image

Doesn't work (passing to useForm)

image

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

@crutchcorn
Copy link
Member

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

@bennettdams
Copy link
Author

bennettdams commented Apr 17, 2024

Are you checking against the field errors or the form errors.

Yep, was using the FieldInfo helper from the examples.

it sets form errors

You're right, the validation message exists on field.form.state.errors, thanks!

This is a bit confusing

I have to agree that this is confusing, as one would always need to look for errors in multiple places.
Also, it seems that the form has no touchedErrors like a Field has?

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

@crutchcorn
Copy link
Member

FWIW we're actually planning on removing touchedErrors 😅

Also, we're gonna make the story of form->field validation easier here:

#656

Closing as both are a WIP, but thanks for the feedback and detailed report 😇

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants