Add "removeIssue" method to ctx of superRefine

[yodakaEngineer]

What I wanna solve

I use zod with react hook form.
I implemented cross field validation like this.

z.object(...)
  .refine(
    (data) => data.maxPrice >= data.minPrice,
    {
      path: ['maxPrice'],
      message: 'MaxPrice must be greater than minPrice.',
    }
  )

This is validation that maxPrice must be greater than minPrice.
When user input 10 to minPrice and input 5 to maxPrice, this form shows error under the maxPrice input.
Because path is indicated 'maxPrice'.
In this situation, after that, if user changes value of minPrice to 3, validation should pass.
But, form shows still un error under the MaxPrice yet.

How to solve

Add "removeIssue" method to ctx of superRefine like this.

.superRefine((data, ctx) => {
  if (data.maxPrice >= data.minPrice) {
    ctx.removeIssue({
      path: ['maxPrice'],
    })
  } else {
    ctx.addIssue({
      code: ZodIssueCode.custom,
      message: 'MaxPrice must be greater than minPrice.',
      path: ['maxPrice'],
    })
  }
})

What do you think this feature?
I would like to open PR if you all like this.

[JacobWeisenburger]

This sounds like you are trying to add a feature to zod to address a problem with react hook form. When it seems to me that this issue should be addressed with react hook form.

[AndreLuizGarcia]

Hi @yodakaEngineer I was having the same problem and like you I was searching for a solution based on Zod but with @JacobWeisenburger's message I started to take a look at ways to "fix" it based on RHF and I found that we can set which fields depend on other to trigger the validation. Please take a look here, that will help you.

https://react-hook-form.com/api/useform/register/ - search for deps
https://stackoverflow.com/a/70380922

[yodakaEngineer]

OMG!
This is exactly what I'm looking for!
Thank you!!