Clear submitError when an inputs value has been changed

[PaulSavignano]

Are you submitting a bug report or a feature request?

Feature request

What is the current behavior?

SubmitErrors persist when an inputs value has changed after a [FORM_ERROR] is returned.

What is the expected behavior?

SubmitErrors are cleared when an inputs value is updated. Similar behavior to resetting the form.

Sandbox Link

https://codesandbox.io/s/9y9om95lyp

What's your environment?

final-form@1.2.1
react-final-form@1.1.1

Other information

How can a submitError be cleared once an inputs value has been updated and changed? I would like to clear the submitErrors and the submitError after a user makes an update to an input and the form is no longer in error.

Any help or guidance would be greatly appreciated. Thanks for the great library!

[maciejmyslinski]

isn't there dirtySinceLastSubmit value in meta for every field? You could use that to decide if you want to display an error.

And then there is also dirtySinceLastSubmit value in form render prop and you could use that to know if a form was touched since last submit and decide not to display an error.

Would that solve your problem?

[sergeymishin]

@maciejmyslinski not really, if you want to dismiss error until the next submit. It will be awesome to also have isSubmitting value in meta, so you can watch it and change visible state for the error component.

[alex-shatalov]

field propdirtySinceLastSubmit helps if you showing error in Field, but we show after submit a list of submitErrors. Component with list of errors subscribed on all field values and error removing only when value of field changed. Is there another ways? dirtySinceLastSubmit in form prop cannot help to know what exactly field value was changed

[PerfectPixel]

I have an issue attached to that. In my experience is is quite common to disable the submit button if the form is invalid. However, after submitting and changing the form, it stays invalid.

https://codesandbox.io/s/vql1q4kzv0

Edit: I guess my issue is rather related to final-form/final-form#80

But clearing submission errors on field change would also be interesting.

[erikras]

Published fix in final-form@4.5.1.

[PaulSavignano]

Thanks Erik!

How do you recommend clearing the field error once the field has been updated and changed? I would like to preserve the values in the other fields while clearing the field that received the submit error.

[Soundvessel]

@PaulSavignano I updated the logic used for field-level validation highlighting and field-level error messages to meta.touched && (meta.error || (meta.submitError && !meta.dirtySinceLastSubmit)). That way the submit error state is not shown when the user starts re-entry to fix the mistake.

[umer4ik]

@Soundvessel just want to add that in this case after while form submission is in progress this condition meta.touched && (meta.error || (meta.submitError && !meta.dirtySinceLastSubmit)) will be true.
So I've added meta.submitting to this expression:
meta.touched && (meta.error || (meta.submitError && !meta.dirtySinceLastSubmit)) && !meta.submitting

[NaviMarella]

@erikras I used meta.touched && (meta.error || (meta.submitError && !meta.dirtySinceLastSubmit)) for updating field level validations. It's working as expected.

I observe form state is still not updating, when i type something into these fields(which has submit errors). Is there any work around for this problem ??

[shrugs]

this approach still does not clear the submitErrors themselves, so the valid property is still false even after the inputs are dirty. looking at the source code, the only way to clear submitErrors is to resubmit.

one possible solution is to, in your components, construct your own valid property by recreating https://github.com/final-form/final-form/blob/master/src/FinalForm.js#L545 and making the last condition something like !(!formState.dirtySinceLastSubmit && formState.submitErrors && hasAnyError(formState.submitErrors))