T
TanStack•2mo ago
ambitious-aqua

`field.state.meta.isValid` not updated when validating on the server

field.state.meta.isValid is true in Next.js after server validation, unless I also apply the same validation on the client. Shouldn't that state be merged by mergeForm? Would be a lot easier DX if I could just rely on field.state.meta.isValid and field.state.meta.errors instead of having to merge those manually.
5 Replies
ambitious-aqua
ambitious-aquaOP•2mo ago
This is what I'm currently having to use to get to the username field errors... does anybody know of a better way? This seems strange: 
const formErrors = useStore(form.store, (state) => state.errors)
const usernameErrors = formErrors
    .filter((error) => error != null)
    .filter((error) => 'username' in error)
    .flatMap((error) => error.username)
const formErrors = useStore(form.store, (state) => state.errors)
const usernameErrors = formErrors
    .filter((error) => error != null)
    .filter((error) => 'username' in error)
    .flatMap((error) => error.username)
absent-sapphire
absent-sapphire•2mo ago
it should be, yeah. What is the error generated in the nextjs validation?
ambitious-aqua
ambitious-aquaOP•2mo ago
no error, it showed as valid even if the server validation failed - i just assumed i couldn't rely on field.state.meta.isValid if I only validated it on the server, so I passed the same zod schema to the client validator as well
absent-sapphire
absent-sapphire•2mo ago
could you share your server validate? I‘ll see if there‘s a problem with it this evening or tomorrow
flat-fuchsia
flat-fuchsia•2mo ago
I have the same problem. Looks like there are a couple of issues in the repo about it: - FieldAPI: state.meta.errors are not updating properly when using server-validations for errors - Zod refine errors with specific paths aren't propagated to field error states - Zod errors from server action aren't propagated to field error. And even a PR. For now, I'm handling it manually, getting the error from the field meta for the client side validation and the form errorMap for the server side validation. Something like this: 
  const field = useFieldContext();
  const fieldError = useStore(field.store, (state) => state.meta.errors[0]);
  const serverError = useStore(
    field.form.store,
    (state) => state.errorMap.onServer?.fields[field.name]?.[0],
  );
  const field = useFieldContext();
  const fieldError = useStore(field.store, (state) => state.meta.errors[0]);
  const serverError = useStore(
    field.form.store,
    (state) => state.errorMap.onServer?.fields[field.name]?.[0],
  );
But it would be nice if the mapping was handled by mergeForm, to get the field specific errors sent by the server validation in its respective field meta

Did you find this page helpful?