compact thistle
Hey there,
so I am new to trying out server actions. I currently use this useActionState code for my form (which then handles it in the backend) and it works! The only thing that doesnt work anymore (now that I've switched from a simple submit handler to a server action): resetting the form and seeing zod's frontend validation. Quick recap: this used (!) to be my actual code before that worked like a charm:
function onSubmit(values: z.infer<typeof formSchema>) {
console.log("Form sent: ", values);
form.reset();
}
Then I switched to a server action with useActionState and connected it to my (React Hook) Form:
const [state, action, isPending] = useActionState(sendFormEmail, "");
<Form {...form}>
<form className="w-full max-w-4xl mx-auto space-y-6" action={action}>
...
The server action works fine in the backend, but:
How on earth do I clear my form's inputs now (best practice way, if possible) and how do I make the frontend validation visible again? When I enter invalid data, I don't get Zod's error messages anymore.
Note: Using both the action and the onSubmit attribute does not work for the form, one cancels the other one out. I can only use one of
Last but not least, using the useActionState Hook now forced my server action function to include the "previousState" parameter. I honestly don't know any good use case for this, is there any way to omit it?
lilac gate
timid trail
fast widget
desert basin
