Next.js Discord

Discord Forum

Reseting react hook form after submit

Answered
<Milind ツ /> posted this in #help-forum
Open in Discord
Avatar
<Milind ツ />OP
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:
        <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
View full answer

22 Replies

Avatar
<Milind ツ />OP
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,
            });
        }
    };
Avatar
Giant panda
useEffect(() => {
 if (formState.isSubmitSuccessful) {
   reset({}, { keepValues: false });
 }
}, [formState, reset]);
try this
https://react-hook-form.com/docs/useform/reset
Avatar
<Milind ツ />OP
oh its in their rules
Avatar
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 form
Avatar
<Milind ツ />OP
the reset does happen but values stays in the fields

like this
Image
Avatar
Giant panda
can you share your code ?
Avatar
<Milind ツ />OP
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
Avatar
Giant panda
If you want to reset the individual form field then you can use "resetField"
Avatar
<Milind ツ />OP
i want to reset all fields after form gets submitted. there's about 10-11 fields
Avatar
Giant panda
then use the reset function with the useEffect
Avatar
<Milind ツ />OP
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
Avatar
<Milind ツ />OP
i got it working. Had a problem of passing ref. Without ref, the field doesnt get notified that form got reset
Answer
Avatar
Giant panda
great