From 0018223d33b51d801d3609b5521c8e45c8a27020 Mon Sep 17 00:00:00 2001
From: amazingdudu <a526256724@hotmail.com>
Date: Wed, 10 Jan 2024 14:20:26 +0800
Subject: [PATCH] feat: add submission failed handler

---
 docs/api/formik.md             | 11 +++++++++++
 packages/formik/src/Formik.tsx |  8 ++++++++
 packages/formik/src/types.tsx  |  9 +++++++++
 3 files changed, 28 insertions(+)

diff --git a/docs/api/formik.md b/docs/api/formik.md
index 09c0c159b..c0dd51cd8 100644
--- a/docs/api/formik.md
+++ b/docs/api/formik.md
@@ -398,6 +398,17 @@ included in the `FormikBag`.
 
 > IMPORTANT: If `onSubmit` is async, then Formik will automatically set `isSubmitting` to `false` on your behalf once it has resolved. This means you do NOT need to call `formikBag.setSubmitting(false)` manually. However, if your `onSubmit` function is synchronous, then you need to call `setSubmitting(false)` on your own.
 
+### `onSubmitFailed: (errors: object | Promise<FormikErrors<Values>>, formikBag: FormikBag) => void`
+
+Your form submission failed handler. It is passed your forms `errors` and the
+"FormikBag", which includes an object containing a subset of the
+[injected props and methods](#formik-render-methods-and-props) (i.e. all the methods
+with names that start with `set<Thing>` + `resetForm`) and any props that were
+passed to the wrapped component.
+
+Note: `errors`, `touched`, `status` and all event handlers are NOT
+included in the `FormikBag`.
+
 ### `validate?: (values: Values) => FormikErrors<Values> | Promise<any>`
 
 _Note: I suggest using `validationSchema` and Yup for validation. However,
diff --git a/packages/formik/src/Formik.tsx b/packages/formik/src/Formik.tsx
index cd17adcd4..8502c78f5 100755
--- a/packages/formik/src/Formik.tsx
+++ b/packages/formik/src/Formik.tsx
@@ -137,6 +137,7 @@ export function useFormik<Values extends FormikValues = FormikValues>({
   isInitialValid,
   enableReinitialize = false,
   onSubmit,
+  onSubmitFailed,
   ...rest
 }: FormikConfig<Values>) {
   const props = {
@@ -144,6 +145,7 @@ export function useFormik<Values extends FormikValues = FormikValues>({
     validateOnBlur,
     validateOnMount,
     onSubmit,
+    onSubmitFailed,
     ...rest,
   };
   const initialValues = React.useRef(props.initialValues);
@@ -794,6 +796,8 @@ export function useFormik<Values extends FormikValues = FormikValues>({
           // throw combinedErrors;
           if (isInstanceOfError) {
             throw combinedErrors;
+          } else {
+            executeSubmitFailed()
           }
         }
         return;
@@ -859,6 +863,10 @@ export function useFormik<Values extends FormikValues = FormikValues>({
     return onSubmit(state.values, imperativeMethods);
   });
 
+  const executeSubmitFailed = useEventCallback(() => {
+    return onSubmitFailed?.(state.errors, imperativeMethods);
+  });
+
   const handleReset = useEventCallback(e => {
     if (e && e.preventDefault && isFunction(e.preventDefault)) {
       e.preventDefault();
diff --git a/packages/formik/src/types.tsx b/packages/formik/src/types.tsx
index 71db6792c..60fad6ac8 100644
--- a/packages/formik/src/types.tsx
+++ b/packages/formik/src/types.tsx
@@ -223,6 +223,15 @@ export interface FormikConfig<Values> extends FormikSharedConfig {
     values: Values,
     formikHelpers: FormikHelpers<Values>
   ) => void | Promise<any>;
+  
+  /**
+   * Submission failed handler（invoke when validation fails）
+   */
+  onSubmitFailed?: (
+    errors: object | Promise<FormikErrors<Values>>,
+    formikHelpers: FormikHelpers<Values>
+  ) => void;
+
   /**
    * A Yup Schema or a function that returns a Yup schema
    */