Back
Completely confused about appwrite types, zod validation and html forms
I used the appwrite cli to get types such as:
TypeScript
export type Events = Models.Row & {
title: string;
description: string | null;
startDate: string;
endDate: string;
location: string;
I then derived the zod schema like this:
TypeScript
export const eventFormSchema = z.object({
title: z.string().min(1, "Event Titel ist erforderlich"),
description: z.string().nullish(),
startDate: z.string().min(1, "Startdatum ist erforderlich"),
endDate: z.string().min(1, "Enddatum ist erforderlich"),
location: z.string().min(1, "Ort ist erforderlich")
});
so that I can do:
TypeScript
// ... some imports
type EventFormData = z.infer<typeof eventFormSchema>;
export function EventForm({ event, eventId, type = "create" }: EventFormProps) {
const eventFn = useServerFn(
type === "create" ? eventsService.createEvent : eventsService.updateEvent
);
// ... other code
const form = useForm({
defaultValues: {
title: event?.title || "",
description: event?.description || undefined,
startDate: event?.startDate
? new Date(event.startDate).toISOString().split("T")[0]
: "",
endDate: event?.endDate
? new Date(event.endDate).toISOString().split("T")[0]
: "",
location: event?.location || "",
status: event?.status || "draft",
bookingLink: event?.bookingLink || undefined,
imageUrl: event?.imageUrl || undefined,
} as EventFormData
// ...other code
return (
// ... form elements
<form.Field
name="description"
// ... some other code
<Textarea
id={field.name}
name={field.name}
value={field.state.value} // shows Type 'null' is not assignable to type // 'string | number | readonly string[] | undefined'.ts(2322)
/>
//... other code
)
}
I am really a bit lost how to properly set this up. This null value is killing me.
TL;DR
Developers are struggling with appwrite types, zod validation, and HTML forms. To resolve the issue where `Type 'null' is not assignable to type 'string | number | readonly string[] | undefined'.ts(2322)`, try replacing `value={field.state.value}` with `value={field.state.value ?? ""}`.
Try replacing value={field.state.value} with value={field.state.value ?? ""} first. See whether it works
