How to access general form refine errors from form state in a type-safe manner

[bennettdams]

Update:

Sorry, this should've been posted in the React Hook Form repo, but one can't delete a discussion.

---

Original post:

I'm using general refine errors in my schema, but I don't know how to access them in a type-safe manner.

I have a simple schema that I want to use to update a user.
The user can either
a) input a new username
b) input a new password
c) input a new username & a new password

This means that username and password are both optional, hence the partial.
That's why I additionally have refine to check whether either a new username or a new password has been given as input,
because I don't want to submit if both are empty.

const generalErrorKey = "general";

const userUpdateSchema= z
  .object({
    username: z.string().min(2).max(50),
    password: z.string().min(10).max(50),
  })
  .partial()
  .refine((data) => data.username || data.password, {
    path: [generalErrorKey],
    message: "Either username or password should be filled in.",
  });

type UserUpdate = z.infer<typeof userUpdateSchema>;

As you can see, the refine error is not used specifically for username or password, it's rather a general "form" error. I created a new key general for that.

Now, when I want to access this error, Zod does not know it:

Property 'general' does not exist on type '{ username?: FieldError | undefined; password?: FieldError | undefined; }'.ts(2339)

  const {
    register,
    handleSubmit,
    formState: {
      errors: {
        username: usernameError,
        password: passwordError,
        // Property 'general' does not exist on type '{ username?: FieldError | undefined; password?: FieldError | undefined; }'.ts(2339)
        [generalErrorKey]: generalError,
      },
    },
  } = useForm<UserUpdate>({
    mode: "all",
    resolver: zodResolver(userUpdateSchema),
  });

This works at runtime, the refine errors are added correctly, but TypeScript is mad at me.

---

Can I somehow while creating the schema let Zod know how my custom error field is called, without a custom ZodErrorMap?

Or is there maybe an easier way to handle these general errors altogether?

[scotttrinh]

I think you might need to update your useForm hook to take the error case into consideration, too? I'm not familiar with that hook, but you might need to make it an intersection like:

useForm<UserUpdate & { general?: string; }>

Does that help at all?

[bennettdams]

I just realized that I posted this question in the wrong repo 😅 Should've been the React Hook Form repo, sorry.