Package Exports

final-form-submit-errors
final-form-submit-errors/dist/index.esm.js
final-form-submit-errors/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (final-form-submit-errors) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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} />}
  />
);