As a developer I would like to disable the "Submit" button when the user successfully submitted the form using React Final Form, and enable the "Submit" button if the user enters some new text in the form.

Current

The variable pristine sets the disable prop to true only when the form loads for first time, but when the user submit the form (not reloading the page) the variable pristine is false and I expect it to be true in order to disable the "Submit" button.

Desired behaviour

• The Submit button is disabled when the form loads for first time.
• The Submit button is enabled when the user enters text or make changes.
• The Submit button is disabled after the user click Submit and it was successful.
• The Submit button should be enabled if the user enters more changes after submitting.

Example of current behaviour

My investigation

I tried to use a bination of the following variables provided by Final Form but with unsuccessful results pristine, touched, submitSucceeded, lastSubmittedValues

As a developer I would like to disable the "Submit" button when the user successfully submitted the form using React Final Form, and enable the "Submit" button if the user enters some new text in the form.

Current

The variable pristine sets the disable prop to true only when the form loads for first time, but when the user submit the form (not reloading the page) the variable pristine is false and I expect it to be true in order to disable the "Submit" button.

Desired behaviour

• The Submit button is disabled when the form loads for first time.
• The Submit button is enabled when the user enters text or make changes.
• The Submit button is disabled after the user click Submit and it was successful.
• The Submit button should be enabled if the user enters more changes after submitting.

Example of current behaviour

https://codesandbox.io/s/github/final-form/react-final-form/tree/master/examples/simple

My investigation

I tried to use a bination of the following variables provided by Final Form but with unsuccessful results pristine, touched, submitSucceeded, lastSubmittedValues

• javascript
• reactjs
• forms
• react-final-form
• final-form

• do you have any code? – ezra Commented Feb 29, 2020 at 2:07
• @ezra I provided the code, it is in here: codesandbox.io/s/github/final-form/react-final-form/tree/master/… – Matt Commented Feb 29, 2020 at 3:18

1 Answer 1

To acplish this, you will need to "reinitialize" the form after you submit.

After your submit is successful, you will need to pass those submitted form values back into the initialValues prop on <Form/>. That will ensure that your pristine value accurately reflects the values that have been saved/submitted.

If you do this, pristine should be the only value your submit button needs to know if it should be disabled or not.

Side note: Please only implement this pattern on forms that are editing existing data. The reason being that if you are starting with an empty form, and have required fields, attempting to submit is helpful in that it will mark all the fields as touched so you can display error messages. But if you disable the submit button on pristine, you cannot get this benefit.