How can I lift validation errors up to the parent object?

[antoinerey]

👋 Hey!

So, I have an issue with validating deep objects. The form validation as a whole works as expected, but I'm getting trouble associating validation errors with the part of the form I have in mind.

Take the following form:

const form = useForm({
  defaultValues: {
      price: {
        amount: string,
        currency: 'EUR',
      },
  },
})

I consider prices as a single entity with two properties: amount and currency. I pass them around in the codebase as an "opaque" object, and I built a custom PriceInput that works the same way.

<form.Field name="price">
  {(field) => (
    <PriceInput 
      price={field.state.value}
      onChangePrice={field.handleChange}
      onBlur={field.handleBlur}
      errors={field.state.meta.errors}
    />
  )}
</form>

It works great. When typing a new amount in the PriceInput, it gets reflected into the form values. Then, I tried to add validations into the mix.

const form = useForm({
  defaultValues: {
      price: {
        amount: string,
        currency: 'EUR',
      },
  },

  validators: {
    onChange: z.object({
      price: z.object({
        amount: z.string().min(1), // Catches empty amounts.
        currency: z.litteral('EUR'),
      }),
    }),
  },
})

The validation works fine in the sense that it catches issues, and disables the form. However, the error gets associated with price.amount and not price (as I would like to). Because of that, the field.state.meta.errors passed to the PriceInput never gets updated, and stays empty.

So my question is: Is there a way to associate "deep" errors with their parent field instead?

---

Here is a live example of the issue I'm bumping into: https://stackblitz.com/edit/vitejs-vite-naafteya?file=src/PriceInput.tsx,src/App.tsx.

[antoinerey]

I believe the root cause of the issue is the error.path property set on Zod side, so I tried looking into it. Unfortunately, I couldn't find much. It seems there's no way to override the path associated with issues.

The only thing would be to rely on the .refine method from Zod like this:

const form = useForm({
  // ...

  validators: {
    onChange: z.object({
      price: z.object({
        amount: z.string(),
        currency: z.litteral('EUR'),
      }).refine(price => price.amount.length > 1, {
        message: 'Field is required',
      }),
    }),
  },
})

But I feel like it kind of defeats the purpose of Zod. Most of the validation would then happen in the refine method, negatively impacting the developer experience and the maintenance of this piece of code.

Perhaps there's another way with Zod? Or maybe the solution lives in TanStack Form? 🤷