Final-form-submit-errors NPM

final-form-submit-errors

A helper for react-final-form which enables automatic submit errors reset

Reason

final-form is a great library, but it has one major problem. After you throw a submit error, your form becomes invalid forever and submit errors would not be cleared until the next submit.

It's very intuitive to clear an error if the field containing the error is changing, and final-form-submit-errors does exactly that.

Install

npm i final-form-submit-errors or yarn add final-form-submit-errors

Usage

With the SubmitErrorsSpy component:

import { Form } from 'react-final-form';
import {
  submitErrorsMutators,
  SubmitErrorsSpy,
} from 'final-form-submit-errors';

const MyForm = () => (
  <Form
    onSubmit={onSubmit}
    mutators={{
      // add submitErrorsMutators to your mutators
      ...submitErrorsMutators,
    }}
    render={({ handleSubmit }) => (
      <form onSubmit={handleSubmit}>
        {/* add SubmitErrorsSpy somewhere in your form */}
        <SubmitErrorsSpy />
      </form>
    )}
  />
);

With the useResetSubmitErrors hook:

import { Form } from 'react-final-form';
import {
  submitErrorsMutators,
  useResetSubmitErrors,
} from 'final-form-submit-errors';

const FormContent = ({ handleSubmit }) => {
  useResetSubmitErrors();

  return <form onSubmit={handleSubmit}>{/* ... */}</form>;
};

const MyForm = () => (
  <Form
    onSubmit={onSubmit}
    mutators={{
      // add submitErrorsMutators to your mutators
      ...submitErrorsMutators,
    }}
    render={props => <FormContent {...props} />}
  />
);