Optional number with gt(0)

[marisancans]

Hello, i'm struggling to grasp how to achieve this:

1. There is a field which accepts a number
2. If this number is not provided:
   A. Return the value as null / undefined (whatever goes better with mongodb)
   B. Dont return it at all (Even better for mongodb)
3. If the use does enter it, it must be greater than zero
4. If user fills "price.max" it must be higher than min

Here is how far I have gone before hitting a brick wall:

// Define your Zod schema
const formSchema = z.object({
    filter_name: z.string(),
    description: z.string(),
    price: z.object({
        min: z.coerce.number().gt(0),
        max: z.coerce.number().gt(0)
    }),
  });
  
  type FormData = z.infer<typeof formSchema>;
  
  const EstateForm = () => {

    const {
      control,
      handleSubmit,
      setValue,
      formState: { errors },
    } = useForm<FormData>({
      resolver: zodResolver(formSchema),
      defaultValues: {
        filter_name: '',
        description: '',
        price: {
            min: '',
            max: '',
        }
      },
    });
  
    // 2. Define a submit handler.
    const onSubmit = (values: FormData) => {
      // Do something with the form values.
      // ✅ This will be type-safe and validated.
      console.log(values);
    };

  
    return (
      <form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
        <div>
          <Label >Filter name</Label>
          <Controller
            name="filter_name"
            control={control}
            render={({ field }: { field: any }) => (
              <>
                <Input {...field}/>
                {errors.filter_name && <span>{errors.filter_name.message}</span>}
              </>
            )}
          />
        </div>
        <div>
          <Label>Description</Label>
          <Controller
            name="description"
            control={control}
            render={({ field }: { field: any }) => (
              <>
                <Textarea {...field} />
                {errors.description && <span>{errors.description.message}</span>}
              </>
            )}
          />
        </div>
        <div className="grid grid-cols-3 gap-2">
        <Label>Price</Label>
            <div>
            <Label>Min</Label>
            <Controller
                name="price.min"
                control={control}
                render={({ field }: { field: any }) => (
                <>
                    <Input {...field}/>
                    {errors.price?.min && <span>{errors.price.min.message}</span>}
                </>
                )}
            />
            </div>
            <div>
            <Label>Max</Label>
            <Controller
                name="price.max"
                control={control}
                render={({ field }: { field: any }) => (
                <>
                    <Input {...field}/>
                    {errors.price?.max && <span>{errors.price.max.message}</span>}
                </>
                )}
            />
            </div>
        </div>
        <button type="submit">Submit</button>
      </form>
    );
  };

Using coerce kind of works but it returns 0 if no user input is given which is not what I want

[marisancans]

Ok, after some more googling I am starting to grasp how zod works.
I have made a successful example where the only thing that doesnt work now is that its not showing my error message.

// Define your Zod schema
const formSchema = z.object({
  filter_name: z.string(),
  description: z.string(),
  price: z
    .object({
      min: z.preprocess(
        (a: any) => parseNullableInt(a),
        z.union([z.number().gte(0), z.null()])
      ),
      max: z.preprocess(
        (a: any) => parseNullableInt(a),
        z.union([z.number().gt(0), z.null()])
      ),
    })
    .superRefine((val, ctx) => {
      if (val.min !== null && val.max !== null) {
        console.log("non nulls", val.min, val.max);
        if (val.min >= val.max) {
          console.log("Should display error");
          ctx.addIssue({
            code: z.ZodIssueCode.custom,
            message: `Min value cant be smaller than max`,
          });
        }
      }
    }),
});

Edit:
It seems like I have figured out how to extract error message from superRefine. But it doesnt seem correct (dont like to access it from .root)

        {errors.price && errors.price?.root?.message && (
          <span>{errors.price.root.message}</span>
        )}

[AndreiSoroka]

const parsedForm = formSchema.safeParse({/*...some data...*/});
if (!parsedForm.success) {
    console.log('list of errors', parsedForm.error.issues);
}
const parsedData = parsedForm.data;

[dschulten]

Also note that it is essential to switch from z.infer<typeof formSchema> to z.input<typeof formSchema>, once your zod pipeline transforms the output to a different type than the input: https://zod.dev/?id=type-inference.
Especially if you use React.useForm() and you need to pass empty strings as defaultValues for zod numeric types: https://stackoverflow.com/q/79369507/743507