Reseting react hook form after submit
Answered
<Milind ツ /> posted this in #help-forum
Hi,
I have made a react hook form + zod based form but i am not able to reset the values in the text fields. I have called the reset() from useForm() in the end of the formSubmit function which it does seem to reset the form but it doesnt remove any value from fields.
Could someone check whats wrong?
Form UI:
I have made a react hook form + zod based form but i am not able to reset the values in the text fields. I have called the reset() from useForm() in the end of the formSubmit function which it does seem to reset the form but it doesnt remove any value from fields.
Could someone check whats wrong?
Form UI:
<form
onSubmit={handleSubmit((data) => handleContactFormSubmit(data))}
className="flex flex-col gap-6 justify-center text-center md:mx-20 lg:mx-40 xl:mx-56 mb-20 px-8 md:px-0"
>
<FormInput
label="FULL NAME [REQUIRED]"
inputStyle={`${errors?.fullname && "border-red-400"}`}
inputType="text"
inputId={"fullname"}
placeholder="Enter your full name here"
{...register("fullname", {
value: values.fullname,
required: true,
onChange(event) {
event.preventDefault();
setValue("fullname", event.target.value);
},
})}
>
{errors?.fullname && errors.fullname.message
? errors.fullname.message
: ""}
</FormInput>
</form>
Answered by <Milind ツ />
i got it working. Had a problem of passing ref. Without ref, the field doesnt get notified that form got reset
22 Replies
Form logic:
const {
handleSubmit,
register,
reset,
getValues,
setValue,
formState: { errors },
} = useForm({
defaultValues: initialFormState,
resolver: zodResolver(ContactFormSchema),
mode: "onChange",
reValidateMode: "onChange",
});
const values = getValues();
const handleContactFormSubmit: SubmitHandler<ContactFormType> = async (
data
) => {
const result = ContactFormSchema.safeParse(data);
if (!result.success) {
toast.error(
"Data appears to be invalid! Please cross-check your input fields."
);
return;
}
try {
setDisabled(true);
await sendMail(result.data)
return;
} catch (error) {
setDisabled(false);
const msg = getErrorMessage(error);
toast.error(msg);
return;
} finally {
setDisabled(false);
reset(initialFormState, {
keepValues: false,
});
}
};
Giant panda
useEffect(() => {
if (formState.isSubmitSuccessful) {
reset({}, { keepValues: false });
}
}, [formState, reset]);
try this
oh its in their rules
Giant panda
yes
import { useForm, useFieldArray, Controller } from "react-hook-form"
function App() {
const {
register,
handleSubmit,
reset,
formState,
formState: { isSubmitSuccessful },
} = useForm({ defaultValues: { something: "anything" } })
const onSubmit = (data) => {
// It's recommended to reset in useEffect as execution order matters
// reset({ ...data })
}
React.useEffect(() => {
if (formState.isSubmitSuccessful) {
reset({ something: "" })
}
}, [formState, submittedData, reset])
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("something")} />
<input type="submit" />
</form>
)
}
their way to reset the formGiant panda
can you share your code ?
form code is in first post
the form input basically is like this
<span className="flex flex-col gap-4">
<label
htmlFor={inputId}
className=""
>
{label}
</label>
<span className="flex flex-col gap-1 items-start">
<input
type={inputType}
id={inputId}
name={inputId}
className={`${inputStyle} `}
{...props}
/>
<p className="text-sm italic text-red-300">{children}</p>
</span>
</span>
oh well its working when i use this code directly
but not when i made it as a component to reuse its styles
damn
Giant panda
If you want to reset the individual form field then you can use "resetField"
i want to reset all fields after form gets submitted. there's about 10-11 fields
Giant panda
then use the reset function with the useEffect
yea as i said, it is working but not when using FormInput component that i made.
using input directly works
the reset does happen but values stays with formInput
its like field doesnt get notified but react hook form did
i got it working. Had a problem of passing ref. Without ref, the field doesnt get notified that form got reset
Answer
Giant panda
great