React Final Form reset form fields and validation but retain submitSucceeded

Question

I'm using React Final Form to display a form and handle form submission. The scenario is that I want to clear all the form fields on a successful submission but show a submit success message which is bound to the final form submitSucceeded FormState property.

If I use form.reset() this clears all fields and validation but also clears the submitSucceeded FormState.

callback: event => {
         handleSubmit(event).then(() => {
              form.reset();
          });
    },

I can achieve this result by manually going through each form and removing the field value and then resetting the field state. The problem is I want to apply this to any number of forms and don't want to manually overwrite each field but instead automatically reset all fields.

callback: event => {
     handleSubmit(event).then(() => {
          form.change('name', undefined);
          form.resetFieldState('name');
          form.change('email', undefined);
          form.resetFieldState('email');
      });
},

Any help here is appreciated! ref: https://final-form.org/docs/final-form/types/FormState

Carlton Carlton · Accepted Answer · 2020-01-30T14:55:37

I managed to achieve this by looping through all form posted values and resetting each individually:

const submitForm = async (values, form) => {

    // Do something on form submit here

    // Reset form fields, note in a real world scenario
    // this would be inside a success callback
    Object.keys(values).forEach(key => {
        form.change(key, undefined);
        form.resetFieldState(key);
    });
};

React Final Form reset form fields and validation but retain submitSucceeded

1 Answers