Reset values in React Final Form w/ keepDirtyOnReinitialize


How to reset values with keepDirtyOnReinitialize in React Final Form after submitting.

The Issue

If keepDirtyOnReinitialize is applied to your form, then form.reset() no longer able to remove field's value.

The Solution

The Solution is simple— if the form submitted successfully: first change keepDirtyOnReinitialize to false -> perform form reset form.reset() -> and change keepDirtyOnReinitialize back to true.


<Form

  onSubmit={onSubmit}

  keepDirtyOnReinitialize

  render={({ handleSubmit, form }) => (

    <form

       onSubmit={(event) => {

       const promise = handleSubmit(event);

       promise && promise.then(() => {

         form.setConfig('keepDirtyOnReinitialize', false);

         form.reset();

         form.setConfig('keepDirtyOnReinitialize', true);

       })

      return promise;

      }}

    >

    ...

   </form>

}/>


2868e927 153f 4f5c 96bf 8bf0187ba2a9 rectangle 400 x
Alexander
Blinov

Frontend Developer at JetRockets