Change error path on array items to not include index

[mwkcoding]

I'm currently building a schema for a form where you can set some notification settings on a set of error types. You can enter a comma separated list of emails in a text field. I used #1869 to accomplish this. It works! However, I need the email errors to show on the text field which is notificationSettings.[errorType].emails but the path for the errors is notificationSettings.[errorType].emails.0 which causes it to not show up. How would I go about doing that?

[dosubot[bot]]

Hi @mwkcoding! I'm Dosu and I’m helping the zod team.

Zod always includes the array index in the error path for array items (e.g., emails.0) by design, and there isn't a built-in way to customize or remove this in the schema or parse context. This is hardcoded in Zod's core and is reflected in both the documentation and the codebase (docs, code).

To show errors on the parent field (like emails), you'll need to post-process the error output. A common workaround is to aggregate errors from all array items and assign them to the parent field. For example:

import { z } from "zod";

const result = schema.safeParse(data);

if (!result.success) {
  const emailsErrors = result.error.issues
    .filter(issue =>
      issue.path.slice(-2).join('.') === 'emails.0' // adjust as needed for your path
    )
    .map(issue => issue.message);

  // Or, more generally, aggregate all errors under 'emails'
  const parentFieldErrors = result.error.issues
    .filter(issue => issue.path.includes('emails'))
    .map(issue => issue.message);

  // Now you can assign parentFieldErrors to your form field for 'emails'
}

You can also use utilities like z.treeifyError() to get a nested error object, but array item errors will still appear under their index (docs). For more advanced mapping, you might want to flatten all errors under emails regardless of index.

If you want to see more discussion and example workarounds, see this issue and this one.

If this answers your question, feel free to close the issue! If you need a more specific code example for your form library, let me know.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[mwkcoding]

I ended up doing it with a superRefine:

z.object({
	emails: z.string()
}).superRefine((data, ctx) => {
	const emails = emails.trim().toLowerCase().split(",");
	...
	ctx.issues.push({
		code: "too_small",
		minimum: 1,
		origin: "array",
		message: "Please enter at least one email",
		path: ["emails"],
		inclusive: true,
		input: emails,
	});
	...
});