TanStackT
TanStack9mo ago
13 replies
dual-salmon

Type Errors with Zod Enum Usage

Here is my code:
import { z } from "zod";

import { useForm } from "@tanstack/react-form";

const dataSchema = z.object({
  status: z
    .enum(["draft", "published", "archived"])
    .optional()
    .default("draft"),
});

export function Component() {
  const form = useForm({
    defaultValues: { status: "draft" },
    validators: {
      onChange: dataSchema,
/*    ^?
Type 'ZodObject<{ status: ZodDefault<ZodOptional<ZodEnum<["draft", "published", "archived"]>>>; }, "strip", ZodTypeAny, { status: "draft" | "published" | "archived"; }, { ...; }>' is not assignable to type 'FormValidateOrFn<{ status: string; }> | undefined'.
  Type 'ZodObject<{ status: ZodDefault<ZodOptional<ZodEnum<["draft", "published", "archived"]>>>; }, "strip", ZodTypeAny, { status: "draft" | "published" | "archived"; }, { ...; }>' is not assignable to type 'StandardSchemaV1<{ status: string; }, unknown>'.
    The types of ''~standard'.types' are incompatible between these types.
      Type 'Types<{ status?: "draft" | "published" | "archived" | undefined; }, { status: "draft" | "published" | "archived"; }> | undefined' is not assignable to type 'StandardSchemaV1Types<{ status: string; }, unknown> | undefined'.
        Type 'Types<{ status?: "draft" | "published" | "archived" | undefined; }, { status: "draft" | "published" | "archived"; }>' is not assignable to type 'StandardSchemaV1Types<{ status: string; }, unknown>'.
          The types of 'input.status' are incompatible between these types.
            Type 'string | undefined' is not assignable to type 'string'.
              Type 'undefined' is not assignable to type 'string'.ts(2322)
*/
    },
    onSubmit: async ({ value }) => {
                       // ^? { status: string; }
                       // It should be { status: "draft" | "published" | "archived" }
      console.log("Form submitted:", value);
    },
  });

  console.log(form);
}
Was this page helpful?