How to reset setValues in react-hook-form version 7?

user_15782779 0
Viewed 2192

I have form some prefilled values from api and i set them with setValues('input-field-name','value-got-from-api') and when a i use reset method of react-hook-form it resets the newly added data but it does not reset the whole data in fields. For example. if a input fields value with setValue previously is 123 and if i typed 123abc it resets the abc part and sets the fields to 12345. But i wanted to reset to null or blank form.

The direct question will be , how can i reset the form fields either by using plain js or using react-hook-form ?

PS: i tried reset() method from rect-hook-form and plain js reset document.getElementById('myform').reset(); but noting works.

react-hook-form reactjs forms javascript
1 Answers

You can use the reset method returned from useForm hook.

export default function App() {
  const { register, handleSubmit, reset } = useForm();
  const onSubmit = (data, e) => {};

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: true })} />
      <input {...register("lastName")} />
      <input type="button" onClick={() => {
        reset({
          firstName: "default value",
        }, {
          keepErrors: true, 
          keepDirty: true,
          keepIsSubmitted: false,
          keepTouched: false,
          keepIsValid: false,
          keepSubmitCount: false,
        });
      }} />
    </form>
  );
}
user_94494260
Related