When Use SubmitError . Input Field is Invalid Forever. in 'React' Final Form

when i use <button type="submit" disabled={invalid}>

and use submitError

const onSubmit = async values => {
  if (values.username !== "erikras") {
    return { username: "Unknown username" };
  }

Meta in Username is set Invalid:true When OnChange Username Input it not change meta.invalid

submit button so can’t click anymore.

// but i can hide submitError by meta.dirtySinceLastSubmit

 {(meta.error ||
                  (meta.submitError && !meta.dirtySinceLastSubmit)) &&
                  meta.touched && <span>{meta.error || meta.submitError}</span>}

Sandbox Link

https://codesandbox.io/s/m9vnk7kw8

[ignatevdev]

For anyone landing here, I have made a simple helper for clearing the errors after submit. https://github.com/ignatevdev/final-form-submit-errors

It basically listens for changes in your form and tries to detect if any of the errors in your submitErrors object corresponds to the changed field.

If it does - it clears the error and also removes the path of an error, if necessary, to avoid empty objects and arrays for deep fields.

The library is quite raw and not battle tested yet, but if anyone wants to try it out and give a feedback - you are welcome.

[paulovitin]

Guys, this works:

disabled={hasValidationErrors || (hasSubmitErrors && !dirtySinceLastSubmit)}