Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:12
  • Comments:19 (2 by maintainers)

github_iconTop GitHub Comments

ignatevdevcommented, Sep 9, 2019

For anyone landing here, I have made a simple helper for clearing the errors after submit.

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.

paulovitincommented, Mar 22, 2019

Guys, this works:

disabled={hasValidationErrors || (hasSubmitErrors && !dirtySinceLastSubmit)}
Read more comments on GitHub >

github_iconTop Results From Across the Web

Final Form Docs – `FormState`
An object full of booleans, with a value of true for each dirty field. ... For example, if your form is invalid because...
Read more >
Can a field in react-final-form mark itself as invalid / prevent ...
When the file is uploading, it renders a field that will always be invalid, thus blocking the submission.
Read more >
how to remove the submiterror if the user write another thing ...
When Use SubmitError . Input Field is Invalid Forever. in 'React' Final ... > final-form > react-final-form. to allow the form ...
Read more >
react-final-form - Bountysource
When Use SubmitError . Input Field is Invalid Forever. in 'React' Final Form $ 0. Created 3 years ago in final-form/react-final-form with 19...
Read more >
react-final-form-kt - npm
The name of the field. input.onBlur: (?SyntheticFocusEvent<*>) => void. The onBlur function can take a SyntheticFocusEvent like ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found