iway1 / react-ts-form

https://react-ts-form.com
MIT License
2.01k stars 35 forks source link

issue: mapping inputs for boolean with refine is not working #56

Closed c0nsoleg closed 1 year ago

c0nsoleg commented 1 year ago

Version Number

1.1.3

Codesandbox/Expo snack

https://codesandbox.io/s/sad-parm-v0m5ig

Steps to reproduce

There is an error if .refine is provided to boolean, if u delete line with refine other boolean works fine. If u provide boolean with refine to mapping then it seems to work

Expected behaviour

It should work whether or not refine is specified

Relevant log output

No response

iway1 commented 1 year ago

This is currently supported but the .refine needs to be on the form schema itself versus directly on the field schema. Instead of:

const FormSchema = z.object({
  text: z.string().min(10, "10 length min"),
  terms: z.boolean(),
  other: z
    .boolean()
    .refine((value) => value, {
      message: "You must accept the terms and conditions."
    })
    .describe(" // Accept")
});

Do:

const FormSchema = z
  .object({
    text: z.string().min(10, "10 length min"),
    terms: z.boolean(),
    other: z.boolean()
  })
  .refine(
    (value) => {
      return value.other;
    },
    {
      message: "You must accept the terms and conditions.",
      path: ["other"]
    }
  );

If we supported the way you had it setup, it'd make it impossible to have refine schemas that mapped to specific components (not 100% sure if it's better or worse this way, but since the use case is supported already I don't think there's a strong reason to support a different syntax for it).

This does seem like a potential point of confusion, I'll add a new section to the docs explaining this.

iway1 commented 1 year ago

Added this too the docs so I'm closing, but reopen if it doesn't meet your use case. Here's a codesandbox with the working implementation: https://codesandbox.io/s/dark-cookies-ttj5nf?file=/src/App.tsx