Errors not shown with zod refine about remix-forms HOT 3 CLOSED

@mahrz24 and @zolzaya when you use Zod's .refine on a schema it is not a Schema anymore, it will become z.ZodEffects.
The remix-forms' Form element should receive a schema though.

The solution is to save the schema in a const and refine it only in the domain function like so:

// Your schema file
const schema = z.object({
    email: z.string().min(1).email(),
    password: z.string().min(1),
    passwordConfirmation: z.string().min(1)
})

// Your component
const MyComponent = () => {
  return <Form schema={schema} />
}

// Your domain file
const df = makeDomainFunction(
  schema.refine((data) => data.password === data.passwordConfirmation, {
    message: 'Passwords do not match',
    path: ['passwordConfirmation'],
  })
)(async ({ email, password, passwordConfirmation }) => {
  // ...
})

This solution should make the Form work on both client and server.

I'll be closing this issue for now, feel free to reopen it if my solution doesn't suffice ;) .

from remix-forms.

@gustavoguichard cool thanks :)

from remix-forms.

I have a same issue. Did you solve it?

from remix-forms.