feat: give access to underlying data as object and as form data object

packages/core/src/types.ts

@@ -572,6 +572,8 @@ export type FormComponentMethods = {
   reset: (...fields: string[]) => void
   submit: () => void
   defaults: () => void
+  getData: () => Record<string, FormDataConvertible>
+  getFormData: () => FormData
 }
 
 export type FormComponentonSubmitCompleteArguments = Pick<FormComponentMethods, 'reset' | 'defaults'>

packages/react/src/Form.ts

@@ -185,6 +185,8 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
       reset,
       submit,
       defaults,
+      getData,
+      getFormData,
     })
 
     useImperativeHandle(ref, exposed, [form, isDirty, submit])

packages/react/test-app/Pages/FormComponent/DataMethods.tsx

@@ -0,0 +1,37 @@
+import { Form } from '@inertiajs/react'
+
+export default () => {
+  return (
+    <div>
+      <h1>Test getData() and getFormData() Methods</h1>
+
+      <Form>
+        {({ getData, getFormData }) => (
+          <>
+            <input type="text" name="name" id="name" />
+
+            <button
+              type="button"
+              onClick={() => {
+                const data = getData()
+                console.log('getData result:', data)
+              }}
+            >
+              Test getData()
+            </button>
+
+            <button
+              type="button"
+              onClick={() => {
+                const formData = getFormData()
+                console.log('getFormData entries:', Object.fromEntries(formData.entries()))
+              }}
+            >
+              Test getFormData()
+            </button>
+          </>
+        )}
+      </Form>
+    </div>
+  )
+}

packages/svelte/src/components/Form.svelte

@@ -49,14 +49,14 @@
   $: _method = isUrlMethodPair(action) ? action.method : ((method ?? 'get').toLowerCase() as Method)
   $: _action = isUrlMethodPair(action) ? action.url : (action as string)
 
-  function getFormData(): FormData {
+  export function getFormData(): FormData {
     return new FormData(formElement)
   }
 
   // Convert the FormData to an object because we can't compare two FormData
   // instances directly (which is needed for isDirty), mergeDataIntoQueryString()
   // expects an object, and submitting a FormData instance directly causes problems with nested objects.
-  function getData(): Record<string, FormDataConvertible> {
+  export function getData(): Record<string, FormDataConvertible> {
     return formDataToObject(getFormData())
   }
 
@@ -198,5 +198,7 @@
     {isDirty}
     {submit}
     {defaults}
+    {getData}
+    {getFormData}
   />
 </form>

packages/svelte/test-app/Pages/FormComponent/DataMethods.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { FormDataConvertible } from '@inertiajs/core'
+  import { Form } from '@inertiajs/svelte'
+
+  function testGetData(getData: () => Record<string, FormDataConvertible>) {
+    const data = getData()
+    console.log('getData result:', data)
+  }
+
+  function testGetFormData(getFormData: () => FormData) {
+    const formData = getFormData()
+
+    console.log('getFormData entries:', Object.fromEntries(formData.entries()))
+  }
+</script>
+
+<div>
+  <h1>Test getData() and getFormData() Methods</h1>
+
+  <Form let:getData let:getFormData>
+    <input type="text" id="name" name="name" />
+
+    <button type="button" on:click={() => testGetData(getData)}> Test getData() </button>
+
+    <button type="button" on:click={() => testGetFormData(getFormData)}> Test getFormData() </button>
+  </Form>
+</div>

packages/svelte/test-app/tsconfig.json

@@ -10,6 +10,7 @@
     "sourceMap": true,
     "strict": true,
     "module": "ESNext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "moduleResolution": "bundler",
     "baseUrl": ".",
     "paths": {

packages/vue3/src/form.ts

@@ -243,6 +243,8 @@ const Form = defineComponent({
       reset,
       submit,
       defaults,
+      getData,
+      getFormData,
     }
 
     expose<FormComponentRef>(exposed)

packages/vue3/test-app/Pages/FormComponent/DataMethods.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { FormDataConvertible } from '@inertiajs/core'
+import { Form } from '@inertiajs/vue3'
+
+function testGetData(getData: () => Record<string, FormDataConvertible>) {
+  const data = getData()
+  console.log('getData result:', data)
+}
+
+function testGetFormData(getFormData: () => FormData) {
+  const formData = getFormData()
+  console.log('getFormData entries:', Object.fromEntries(formData.entries()))
+}
+</script>
+
+<template>
+  <div>
+    <h1>Test getData() and getFormData() Methods</h1>
+
+    <Form v-slot="{ getData, getFormData }">
+      <input id="name" type="text" name="name" />
+
+      <button type="button" @click="testGetData(getData)">Test getData()</button>
+
+      <button type="button" @click="testGetFormData(getFormData)">Test getFormData()</button>
+    </Form>
+  </div>
+</template>

tests/form-component.spec.ts

@@ -1,5 +1,5 @@
 import test, { expect, Page } from '@playwright/test'
-import { pageLoads, requests, scrollElementTo, shouldBeDumpPage } from './support'
+import { consoleMessages, pageLoads, requests, scrollElementTo, shouldBeDumpPage } from './support'
 
 test.describe('Form Component', () => {
   test.describe('Elements', () => {
@@ -1448,4 +1448,27 @@ test.describe('Form Component', () => {
       expect(dump.form).toEqual({ child: 'A' })
     })
   })
+
+  test.describe('getData and getFormData methods', () => {
+    test.beforeEach(async ({ page }) => {
+      consoleMessages.listen(page)
+      await page.goto('/form-component/data-methods')
+    })
+
+    test('getData returns form data as object', async ({ page }) => {
+      await page.fill('#name', 'John Doe')
+      await page.getByRole('button', { name: 'Test getData()' }).click()
+
+      const result = consoleMessages.messages.find((msg) => msg.includes('getData result:'))
+      expect(result).toBe('getData result: {name: John Doe}')
+    })
+
+    test('getFormData returns FormData instance', async ({ page }) => {
+      await page.fill('#name', 'Jane Doe')
+      await page.getByRole('button', { name: 'Test getFormData()' }).click()
+
+      const formDataMessage = consoleMessages.messages.find((msg) => msg.includes('getFormData entries:'))
+      expect(formDataMessage).toBe('getFormData entries: {name: Jane Doe}')
+    })
+  })
 })