How to cancel react-final-form validation after form submission?

Viewed 285

When submitting the form that updates existing values I dispatch a redux action creator.

<Form onSubmit={onFormSubmit} destroyOnUnregister>
  {({dirty, invalid, handleSubmit}) =>
    ...
    <Button 
      onClick={handleSubmit} 
      disabled={invalid || !dirty}>
        Save
    </Button>
  }

When form values are received on the backend, the server responds with the updated data, which react-final-form interprets as a submission error (the invalid prop from react-final-form stays true, even when the form was submitted successfully). How can I prevent such behaviour?

I'm updating just one field at a time, i.e. name, when submitting the form, but the server response contains the whole slice of data to update redux store). The validation error I'm getting is:

"submitErrors": {
  "data": {
    "id": 1,
    "name": "Company 1",
    "country": "USA",
    "city": "New York",
    ...
    ...
    "createdAt": "2020-08-06",
    "updatedAt": "2020-08-06",
    "deletedAt": null
  },
  "type": "company/UPDATE_INFO_SUCCESS"
}

Please, notice that the company/UPDATE_INFO_SUCCESS action was triggered.

I did see the following part in the docs about the form submission

3. Asynchronous with a Promise Returns a Promise<?Object> that resolves with no value on success or resolves with an Object of submission errors on failure. The reason it resolves with errors is to leave rejection for when there is a server or communications error.

but such behaviour is highly undesirable.

0 Answers
Related