Add onSubmitComplete prop to Form component (#2503)

joetannenbaum · pascalbaljet · web-flow · commit ff3caa98f602 · 2025-08-14T13:41:02.000+02:00
* vue after submit

* react after submit

* Update Form.ts

* after submit svelte

* afterSubmit -&gt; onSubmitComplete

* Restore syntax

* wip

* wip

---------

Co-authored-by: Pascal Baljet &lt;pascal@pascalbaljet.nl&gt;
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -430,6 +430,7 @@ export type FormComponentProps = Partial<
   action?: string | { url: string; method: Method }
   transform?: (data: Record<string, FormDataConvertible>) => Record<string, FormDataConvertible>
   options?: FormComponentOptions
+  onSubmitComplete?: (props: FormComponentonSubmitCompleteArguments) => void
   disableWhileProcessing?: boolean
 }
 
@@ -442,6 +443,11 @@ export type FormComponentMethods = {
   submit: () => void
 }
 
+export type FormComponentonSubmitCompleteArguments = Pick<
+  FormComponentMethods,
+  'clearErrors' | 'resetAndClearErrors' | 'reset'
+>
+
 export type FormComponentState = {
   errors: Record<string, string>
   hasErrors: boolean
diff --git a/packages/react/src/Form.ts b/packages/react/src/Form.ts
@@ -52,6 +52,7 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
       onSuccess = noop,
       onError = noop,
       onCancelToken = noop,
+      onSubmitComplete = noop,
       disableWhileProcessing = false,
       children,
       ...props
@@ -88,6 +89,15 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
       return () => formEvents.forEach((e) => formElement.current?.removeEventListener(e, updateDirtyState))
     }, [])
 
+    const reset = (...fields: string[]) => {
+      resetFormFields(formElement.current, defaults.current, fields)
+    }
+
+    const resetAndClearErrors = (...fields: string[]) => {
+      form.clearErrors(...fields)
+      reset(...fields)
+    }
+
     const submit = () => {
       const [url, _data] = mergeDataIntoQueryString(
         resolvedMethod,
@@ -104,7 +114,14 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
         onBefore,
         onStart,
         onProgress,
-        onFinish,
+        onFinish: (...args) => {
+          onFinish(...args)
+          onSubmitComplete({
+            reset,
+            resetAndClearErrors,
+            clearErrors: form.clearErrors,
+          })
+        },
         onCancel,
         onSuccess,
         onError,
@@ -115,27 +132,22 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
       form.submit(resolvedMethod, url, submitOptions)
     }
 
-    useImperativeHandle(
-      ref,
-      () => ({
-        errors: form.errors,
-        hasErrors: form.hasErrors,
-        processing: form.processing,
-        progress: form.progress,
-        wasSuccessful: form.wasSuccessful,
-        recentlySuccessful: form.recentlySuccessful,
-        clearErrors: form.clearErrors,
-        resetAndClearErrors: (...fields: string[]) => {
-          form.clearErrors(...fields)
-          resetFormFields(formElement.current, defaults.current, fields)
-        },
-        setError: form.setError,
-        isDirty,
-        reset: (...fields) => resetFormFields(formElement.current, defaults.current, fields),
-        submit,
-      }),
-      [form, isDirty, submit],
-    )
+    const exposed = () => ({
+      errors: form.errors,
+      hasErrors: form.hasErrors,
+      processing: form.processing,
+      progress: form.progress,
+      wasSuccessful: form.wasSuccessful,
+      recentlySuccessful: form.recentlySuccessful,
+      isDirty,
+      clearErrors: form.clearErrors,
+      resetAndClearErrors,
+      setError: form.setError,
+      reset,
+      submit,
+    })
+
+    useImperativeHandle(ref, exposed, [form, isDirty, submit])
 
     return createElement(
       'form',
@@ -150,25 +162,7 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
         },
         inert: disableWhileProcessing && form.processing,
       },
-      typeof children === 'function'
-        ? children({
-            errors: form.errors,
-            hasErrors: form.hasErrors,
-            processing: form.processing,
-            progress: form.progress,
-            wasSuccessful: form.wasSuccessful,
-            recentlySuccessful: form.recentlySuccessful,
-            setError: form.setError,
-            clearErrors: form.clearErrors,
-            resetAndClearErrors: (...fields: string[]) => {
-              form.clearErrors(...fields)
-              resetFormFields(formElement.current, defaults.current, fields)
-            },
-            isDirty,
-            reset: (...fields) => resetFormFields(formElement.current, defaults.current, fields),
-            submit,
-          })
-        : children,
+      typeof children === 'function' ? children(exposed()) : children,
     )
   },
 )
diff --git a/packages/react/test-app/Pages/FormComponent/AfterSubmit.tsx b/packages/react/test-app/Pages/FormComponent/AfterSubmit.tsx
@@ -0,0 +1,29 @@
+import { Form } from '@inertiajs/react'
+
+export default () => {
+  return (
+    <div>
+      <h1>After Submit Test</h1>
+
+      <Form method="post" onSubmitComplete={(props) => props.reset('name')}>
+        {({ errors }) => (
+          <>
+            <div>
+              <input type="text" name="name" id="name" placeholder="Name" defaultValue="John Doe" />
+              {errors.name && <p id="error_name">{errors.name}</p>}
+            </div>
+
+            <div>
+              <input type="email" name="email" id="email" placeholder="Email" defaultValue="john@doe.biz" />
+              {errors.email && <p id="error_email">{errors.email}</p>}
+            </div>
+
+            <div>
+              <button type="submit">Submit</button>
+            </div>
+          </>
+        )}
+      </Form>
+    </div>
+  )
+}
diff --git a/packages/svelte/src/components/Form.svelte b/packages/svelte/src/components/Form.svelte
@@ -30,6 +30,7 @@
   export let onCancel: FormComponentProps['onCancel'] = noop
   export let onSuccess: FormComponentProps['onSuccess'] = noop
   export let onError: FormComponentProps['onError'] = noop
+  export let onSubmitComplete: FormComponentProps['onSubmitComplete'] = noop
   export let disableWhileProcessing: boolean = false
 
   type FormSubmitOptions = Omit<VisitOptions, 'data' | 'onPrefetched' | 'onPrefetching'>
@@ -68,7 +69,19 @@
       onBefore,
       onStart,
       onProgress,
-      onFinish,
+      onFinish: (visit) =>  {
+        if (onFinish) {
+            onFinish(visit)
+        }
+
+        if (onSubmitComplete) {
+            onSubmitComplete({
+                reset,
+                resetAndClearErrors,
+                clearErrors,
+            })
+        }
+      },
       onCancel,
       onSuccess,
       onError,
@@ -93,6 +106,7 @@
     resetFormFields(formElement, defaults, fields)
   }
 
+
   export function clearErrors(...fields: string[]) {
     // @ts-expect-error
     $form.clearErrors(...fields)
@@ -101,15 +115,14 @@
   export function resetAndClearErrors(...fields: string[]) {
     // @ts-expect-error
     $form.clearErrors(...fields)
-    reset(fields)
+    reset(...fields)
   }
 
   export function setError(field: string | object, value?: string) {
     if (typeof field === 'string') {
       // @ts-expect-error
       $form.setError(field, value)
     } else {
-      // @ts-expect-error
       $form.setError(field)
     }
   }
diff --git a/packages/svelte/test-app/Pages/FormComponent/AfterSubmit.svelte b/packages/svelte/test-app/Pages/FormComponent/AfterSubmit.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { Form } from '@inertiajs/svelte'
+</script>
+
+<div>
+  <h1>After Submit Test</h1>
+
+  <Form method="post" let:errors onSubmitComplete={(props) => props.reset('name')}>
+    <div>
+      <input type="text" name="name" id="name" placeholder="Name" value="John Doe" />
+      {#if errors.name}
+        <p id="error_name">{errors.name}</p>
+      {/if}
+    </div>
+
+    <div>
+      <input type="email" name="email" id="email" placeholder="Email" value="john@doe.biz" />
+      {#if errors.email}
+        <p id="error_email">{errors.email}</p>
+      {/if}
+    </div>
+
+    <div>
+      <button type="submit">Submit</button>
+    </div>
+  </Form>
+</div>
diff --git a/packages/vue3/src/form.ts b/packages/vue3/src/form.ts
@@ -1,5 +1,6 @@
 import {
   FormComponentProps,
+  FormComponentRef,
   FormComponentSlotProps,
   FormDataConvertible,
   formDataToObject,
@@ -84,6 +85,10 @@ const Form: InertiaForm = defineComponent({
       type: Function as PropType<FormComponentProps['onError']>,
       default: noop,
     },
+    onSubmitComplete: {
+      type: Function as PropType<FormComponentProps['onSubmitComplete']>,
+      default: noop,
+    },
     disableWhileProcessing: {
       type: Boolean,
       default: false,
@@ -140,7 +145,10 @@ const Form: InertiaForm = defineComponent({
         onBefore: props.onBefore,
         onStart: props.onStart,
         onProgress: props.onProgress,
-        onFinish: props.onFinish,
+        onFinish: (...args) => {
+          props.onFinish(...args)
+          props.onSubmitComplete(exposed)
+        },
         onCancel: props.onCancel,
         onSuccess: props.onSuccess,
         onError: props.onError,
@@ -151,7 +159,16 @@ const Form: InertiaForm = defineComponent({
       form.transform(() => props.transform(data)).submit(method.value, action, submitOptions)
     }
 
-    expose({
+    const reset = (...fields: string[]) => {
+      resetFormFields(formElement.value, defaults.value, fields)
+    }
+
+    const resetAndClearErrors = (...fields: string[]) => {
+      form.clearErrors(...fields)
+      reset(...fields)
+    }
+
+    const exposed = {
       get errors() {
         return form.errors
       },
@@ -171,18 +188,17 @@ const Form: InertiaForm = defineComponent({
         return form.recentlySuccessful
       },
       clearErrors: (...fields: string[]) => form.clearErrors(...fields),
-      resetAndClearErrors: (...fields: string[]) => {
-        form.clearErrors(...fields)
-        resetFormFields(formElement.value, defaults.value, fields)
-      },
+      resetAndClearErrors,
       setError: (fieldOrFields: string | Record<string, string>, maybeValue?: string) =>
         form.setError(typeof fieldOrFields === 'string' ? { [fieldOrFields]: maybeValue } : fieldOrFields),
       get isDirty() {
         return isDirty.value
       },
-      reset: (...fields: string[]) => resetFormFields(formElement.value, defaults.value, fields),
+      reset,
       submit,
-    })
+    }
+
+    expose<FormComponentRef>(exposed)
 
     return () => {
       return h(
@@ -198,23 +214,7 @@ const Form: InertiaForm = defineComponent({
           },
           inert: props.disableWhileProcessing && form.processing,
         },
-        slots.default
-          ? slots.default(<FormComponentSlotProps>{
-              errors: form.errors,
-              hasErrors: form.hasErrors,
-              processing: form.processing,
-              progress: form.progress,
-              wasSuccessful: form.wasSuccessful,
-              recentlySuccessful: form.recentlySuccessful,
-              setError: (fieldOrFields: string | Record<string, string>, maybeValue?: string) =>
-                form.setError(typeof fieldOrFields === 'string' ? { [fieldOrFields]: maybeValue } : fieldOrFields),
-              clearErrors: (...fields: string[]) => form.clearErrors(...fields),
-              resetAndClearErrors: (...fields: string[]) => form.resetAndClearErrors(...fields),
-              isDirty: isDirty.value,
-              reset: (...fields) => resetFormFields(formElement.value, defaults.value, fields),
-              submit,
-            })
-          : [],
+        slots.default ? slots.default(<FormComponentSlotProps>exposed) : [],
       )
     }
   },
diff --git a/packages/vue3/test-app/Pages/FormComponent/AfterSubmit.vue b/packages/vue3/test-app/Pages/FormComponent/AfterSubmit.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { Form } from '@inertiajs/vue3'
+</script>
+
+<template>
+  <div>
+    <h1>After Submit Test</h1>
+
+    <Form method="post" #default="{ errors }" @submit-complete="(props) => props.reset('name')">
+      <div>
+        <input type="text" name="name" id="name" placeholder="Name" value="John Doe" />
+        <p v-if="errors.name" id="error_name">{{ errors.name }}</p>
+      </div>
+
+      <div>
+        <input type="email" name="email" id="email" placeholder="Email" value="john@doe.biz" />
+        <p v-if="errors.email" id="error_email">{{ errors.email }}</p>
+      </div>
+
+      <div>
+        <button type="submit">Submit</button>
+      </div>
+    </Form>
+  </div>
+</template>
diff --git a/tests/app/server.js b/tests/app/server.js
@@ -568,6 +568,9 @@ app.get('/form-component/progress', (req, res) => inertia.render(req, res, { com
 app.post('/form-component/progress', async (req, res) =>
   setTimeout(() => inertia.render(req, res, { component: 'FormComponent/Progress' }), 500),
 )
+app.get('/form-component/after-submit', (req, res) =>
+  inertia.render(req, res, { component: 'FormComponent/AfterSubmit' }),
+)
 app.get('/form-component/state', (req, res) => inertia.render(req, res, { component: 'FormComponent/State' }))
 app.get('/form-component/dotted-keys', (req, res) =>
   inertia.render(req, res, { component: 'FormComponent/DottedKeys' }),
diff --git a/tests/form-component.spec.ts b/tests/form-component.spec.ts
