T
TanStack•2w ago
genetic-orange

Default values with zod validation

Sorry if this is a dumb question, this is my code: 
export const InsertFeaturedWorkFormSchema = z.object({
  title: z.string()
    .min(3, "Title must be at least 3 characters")
    .max(60, "Title must not exceed 60 characters"),
  description: z.string()
    .min(10, "Description must be at least 10 characters")
    .max(1000, "Description must not exceed 1000 characters"),
  bannerImage: z.file()
    .min(mbToBytes(0.01), {message: "File size must be at least 10KB" })
    .max(mbToBytes(10), {message: "File size must not exceed 10MB" }),
});

const form = useAppForm({
    defaultValues: {
      title: "",
      description: "",
      bannerImage: null,
    },
    validators: {onSubmit: InsertFeaturedWorkFormSchema},
    onSubmit: async ({value}: { value: CreateFeaturedWorkFormData }) => {...submit...},
  });
export const InsertFeaturedWorkFormSchema = z.object({
  title: z.string()
    .min(3, "Title must be at least 3 characters")
    .max(60, "Title must not exceed 60 characters"),
  description: z.string()
    .min(10, "Description must be at least 10 characters")
    .max(1000, "Description must not exceed 1000 characters"),
  bannerImage: z.file()
    .min(mbToBytes(0.01), {message: "File size must be at least 10KB" })
    .max(mbToBytes(10), {message: "File size must not exceed 10MB" }),
});

const form = useAppForm({
    defaultValues: {
      title: "",
      description: "",
      bannerImage: null,
    },
    validators: {onSubmit: InsertFeaturedWorkFormSchema},
    onSubmit: async ({value}: { value: CreateFeaturedWorkFormData }) => {...submit...},
  });
problem is when i pass null for bannerImage I got ts error Type null is not assignable to type File - okay expected, but how can I provide default value for it, or moreover, should I provide a default value, whats correct way to do this
8 Replies
genetic-orange
genetic-orange•2w ago
it‘s a problem with the current implementation of standard schemas essentially, the idea is that you don‘t „forget“ about fields and risk errors you can never remove. The types are too strict in its current implementation though, so it has trouble with using null / undefined for required fields I can share a small helper function that allows nullable inputs (but nonnullable outputs) for zod if you‘d like
genetic-orange
genetic-orange•2w ago
https://github.com/TanStack/form/issues/1583 alternatively, keep track of this issue
GitHub
Infer form data type from validator instead of default values · Is...
Currently the type of the form data seems to be inferred from the default values instead of the validator type. However, the validator is typically more complete/extended and since it's used fo...
genetic-orange
genetic-orange•2w ago
oh, looks like I shared the helper function in that issue
genetic-orange
genetic-orangeOP•2w ago
understand, at least its good to know that im not alone on this issue, do you think using it as 
type CreateFeaturedWorkFormData = z.infer<typeof InsertFeaturedWorkFormSchema>;

...

defaultValues: {
  title: "",
  description: "",
  bannerImage: null,
} as unknown as CreateFeaturedWorkFormData,
type CreateFeaturedWorkFormData = z.infer<typeof InsertFeaturedWorkFormSchema>;

...

defaultValues: {
  title: "",
  description: "",
  bannerImage: null,
} as unknown as CreateFeaturedWorkFormData,
would be okay? I still use same schema as is for validation, for defaults I passed null, but for form to see it as output type as force casted it - even though its not completely correct
genetic-orange
genetic-orange•2w ago
infer is the output type, so you‘ll want z.input instead apart from the non nullable issue mentioned before, if you have transforms that change the data, this difference is important and yeah, you lose the type safety of defaultValues. Should be okay if you think you know what you‘re doing
genetic-orange
genetic-orangeOP•2w ago
works fine for me, but still something buzzling me about zod's .input it doesn't really change the inferred type between .infer .input .output for my schema all the same
genetic-orange
genetic-orange•2w ago
infer = output your schema has no transforms or refinements, so they‘re the same. However, if you have them in the future, you‘d suddenly get complaints from ts
genetic-orange
genetic-orangeOP•2w ago
aa make sense, thanks

Did you find this page helpful?