Support for Precognition in <Form> component

packages/core/src/resetFormFields.ts

@@ -161,8 +161,10 @@ export function resetFormFields(formElement: HTMLFormElement, defaults: FormData
     return
   }
 
+  const resetEntireForm = !fieldNames || fieldNames.length === 0
+
   // If no specific fields provided, reset the entire form
-  if (!fieldNames || fieldNames.length === 0) {
+  if (resetEntireForm) {
     // Get all field names from both defaults and form elements (including disabled ones)
     const formData = new FormData(formElement)
     const formElementNames = Array.from(formElement.elements)
@@ -173,7 +175,7 @@ export function resetFormFields(formElement: HTMLFormElement, defaults: FormData
 
   let hasChanged = false
 
-  fieldNames.forEach((fieldName) => {
+  fieldNames!.forEach((fieldName) => {
     const elements = formElement.elements.namedItem(fieldName)
 
     if (elements) {
@@ -184,7 +186,7 @@ export function resetFormFields(formElement: HTMLFormElement, defaults: FormData
   })
 
   // Dispatch reset event if any field changed (matching native form.reset() behavior)
-  if (hasChanged) {
+  if (hasChanged && resetEntireForm) {
     formElement.dispatchEvent(new Event('reset', { bubbles: true }))
   }
 }

packages/core/src/types.ts

@@ -1,4 +1,5 @@
 import { AxiosProgressEvent, AxiosResponse } from 'axios'
+import { NamedInputEvent, ValidationConfig, Validator } from 'laravel-precognition'
 import { Response } from './response'
 
 declare module 'axios' {
@@ -621,6 +622,9 @@ export type FormComponentProps = Partial<
   resetOnSuccess?: boolean | string[]
   resetOnError?: boolean | string[]
   setDefaultsOnSuccess?: boolean
+  validateFiles?: boolean
+  validationTimeout?: number
+  withAllErrors?: boolean
 }
 
 export type FormComponentMethods = {
@@ -633,6 +637,12 @@ export type FormComponentMethods = {
   defaults: () => void
   getData: () => Record<string, FormDataConvertible>
   getFormData: () => FormData
+  valid: (field: string) => boolean
+  invalid: (field: string) => boolean
+  validate(field?: string | NamedInputEvent | ValidationConfig, config?: ValidationConfig): void
+  touch: (...fields: string[]) => void
+  touched(field?: string): boolean
+  validator: () => Validator
 }
 
 export type FormComponentonSubmitCompleteArguments = Pick<FormComponentMethods, 'reset' | 'defaults'>
@@ -645,6 +655,7 @@ export type FormComponentState = {
   wasSuccessful: boolean
   recentlySuccessful: boolean
   isDirty: boolean
+  validating: boolean
 }
 
 export type FormComponentSlotProps = FormComponentMethods & FormComponentState

packages/core/src/useFormUtils.ts

@@ -1,3 +1,4 @@
+import { NamedInputEvent, ValidationConfig } from 'laravel-precognition'
 import {
   FormDataType,
   Method,
@@ -113,4 +114,34 @@ export class UseFormUtils {
     // Use Precognition endpoint with optional options...
     return { ...precognitionEndpoint!(), options: (args[0] as UseFormSubmitOptions) ?? {} }
   }
+
+  /**
+   * Merges headers into the Precognition validate() arguments.
+   */
+  public static mergeHeadersForValidation(
+    field?: string | NamedInputEvent | ValidationConfig,
+    config?: ValidationConfig,
+    headers?: Record<string, string>,
+  ): [string | NamedInputEvent | ValidationConfig | undefined, ValidationConfig | undefined] {
+    const merge = (config: ValidationConfig): ValidationConfig => {
+      config.headers = {
+        ...(headers ?? {}),
+        ...(config.headers ?? {}),
+      }
+
+      return config
+    }
+
+    if (field && typeof field === 'object' && !('target' in field)) {
+      field = merge(field)
+    } else if (config && typeof config === 'object') {
+      config = merge(config)
+    } else if (typeof field === 'string') {
+      config = merge(config ?? {})
+    } else {
+      field = merge(field ?? {})
+    }
+
+    return [field, config]
+  }
 }

packages/react/src/Form.ts

@@ -8,8 +8,10 @@ import {
   mergeDataIntoQueryString,
   Method,
   resetFormFields,
+  UseFormUtils,
   VisitOptions,
 } from '@inertiajs/core'
+import { NamedInputEvent, ValidationConfig } from 'laravel-precognition'
 import { isEqual } from 'lodash-es'
 import React, {
   createElement,
@@ -64,12 +66,36 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
       resetOnSuccess = false,
       setDefaultsOnSuccess = false,
       invalidateCacheTags = [],
+      validateFiles = false,
+      validationTimeout = 1500,
+      withAllErrors = false,
       children,
       ...props
     },
     ref,
   ) => {
+    const getTransformedData = (): Record<string, FormDataConvertible> => {
+      const [_url, data] = getUrlAndData()
+      return transform(data)
+    }
+
     const form = useForm<Record<string, any>>({})
+      .withPrecognition(
+        () => resolvedMethod,
+        () => getUrlAndData()[0],
+      )
+      .setValidationTimeout(validationTimeout)
+
+    if (validateFiles) {
+      form.validateFiles()
+    }
+
+    if (withAllErrors) {
+      form.withAllErrors()
+    }
+
+    form.transform(getTransformedData)
+
     const formElement = useRef<HTMLFormElement>(undefined)
 
     const resolvedMethod = useMemo(() => {
@@ -86,29 +112,62 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
     // expects an object, and submitting a FormData instance directly causes problems with nested objects.
     const getData = (): Record<string, FormDataConvertible> => formDataToObject(getFormData())
 
+    const getUrlAndData = (): [string, Record<string, FormDataConvertible>] => {
+      return mergeDataIntoQueryString(
+        resolvedMethod,
+        isUrlMethodPair(action) ? action.url : action,
+        getData(),
+        queryStringArrayFormat,
+      )
+    }
+
     const updateDirtyState = (event: Event) =>
       deferStateUpdate(() =>
         setIsDirty(event.type === 'reset' ? false : !isEqual(getData(), formDataToObject(defaultData.current))),
       )
 
+    const clearErrors = (...names: string[]) => {
+      form.clearErrors(...names)
+
+      return form
+    }
+
     useEffect(() => {
       defaultData.current = getFormData()
 
+      form.setDefaults(getData())
+
       const formEvents: Array<keyof HTMLElementEventMap> = ['input', 'change', 'reset']
 
       formEvents.forEach((e) => formElement.current!.addEventListener(e, updateDirtyState))
 
-      return () => formEvents.forEach((e) => formElement.current?.removeEventListener(e, updateDirtyState))
+      return () => {
+        formEvents.forEach((e) => formElement.current?.removeEventListener(e, updateDirtyState))
+      }
     }, [])
 
+    useEffect(() => {
+      form.setValidationTimeout(validationTimeout)
+    }, [validationTimeout])
+
+    useEffect(() => {
+      if (validateFiles) {
+        form.validateFiles()
+      } else {
+        form.withoutFileValidation()
+      }
+    }, [validateFiles])
+
     const reset = (...fields: string[]) => {
       if (formElement.current) {
         resetFormFields(formElement.current, defaultData.current, fields)
       }
+
+      form.reset(...fields)
     }
 
     const resetAndClearErrors = (...fields: string[]) => {
-      form.clearErrors(...fields)
+      clearErrors(...fields)
       reset(...fields)
     }
 
@@ -125,12 +184,7 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
     }
 
     const submit = () => {
-      const [url, _data] = mergeDataIntoQueryString(
-        resolvedMethod,
-        isUrlMethodPair(action) ? action.url : action,
-        getData(),
-        queryStringArrayFormat,
-      )
+      const [url, _data] = getUrlAndData()
 
       const submitOptions: FormSubmitOptions = {
         headers,
@@ -163,7 +217,6 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
         ...options,
       }
 
-      form.transform(() => transform(_data))
       form.submit(resolvedMethod, url, submitOptions)
     }
 
@@ -180,14 +233,24 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
       wasSuccessful: form.wasSuccessful,
       recentlySuccessful: form.recentlySuccessful,
       isDirty,
-      clearErrors: form.clearErrors,
+      clearErrors,
       resetAndClearErrors,
       setError: form.setError,
       reset,
       submit,
       defaults,
       getData,
       getFormData,
+
+      // Precognition
+      validator: () => form.validator(),
+      validating: form.validating,
+      valid: form.valid,
+      invalid: form.invalid,
+      validate: (field?: string | NamedInputEvent | ValidationConfig, config?: ValidationConfig) =>
+        form.validate(...UseFormUtils.mergeHeadersForValidation(field, config, headers)),
+      touch: form.touch,
+      touched: form.touched,
     })
 
     useImperativeHandle(ref, exposed, [form, isDirty, submit])

packages/react/src/useForm.ts

@@ -296,20 +296,27 @@ export default function useForm<TForm extends FormDataType<TForm>>(
   const setDefaultsFunction = useCallback(
     (fieldOrFields?: FormDataKeys<TForm> | Partial<TForm>, maybeValue?: unknown) => {
       setDefaultsCalledInOnSuccess.current = true
+      let newDefaults = {} as TForm
 
       if (typeof fieldOrFields === 'undefined') {
+        newDefaults = { ...dataRef.current }
         setDefaults(dataRef.current)
         // If setData was called right before setDefaults, data was not
         // updated in that render yet, so we set a flag to update
         // defaults right after the next render.
         setDataAsDefaults(true)
       } else {
         setDefaults((defaults) => {
-          return typeof fieldOrFields === 'string'
-            ? set(cloneDeep(defaults), fieldOrFields, maybeValue)
-            : Object.assign(cloneDeep(defaults), fieldOrFields)
+          newDefaults =
+            typeof fieldOrFields === 'string'
+              ? set(cloneDeep(defaults), fieldOrFields, maybeValue)
+              : Object.assign(cloneDeep(defaults), fieldOrFields)
+
+          return newDefaults as TForm
         })
       }
+
+      validatorRef.current?.defaults(newDefaults)
     },
     [setDefaults],
   )
@@ -496,7 +503,7 @@ export default function useForm<TForm extends FormDataType<TForm>>(
         const currentData = dataRef.current
         const transformedData = transform.current(currentData) as Record<string, unknown>
         return client[method](url, transformedData)
-      }, defaults)
+      }, cloneDeep(defaults))
 
       validatorRef.current = validator
 

packages/react/test-app/Pages/FormComponent/Precognition/BeforeValidation.tsx

@@ -0,0 +1,55 @@
+import { Form } from '@inertiajs/react'
+import { isEqual } from 'lodash-es'
+
+export default function PrecognitionBefore() {
+  const handleBeforeValidation = (
+    newRequest: { data: Record<string, unknown> | null; touched: string[] },
+    oldRequest: { data: Record<string, unknown> | null; touched: string[] },
+  ) => {
+    const payloadIsCorrect =
+      isEqual(newRequest, { data: { name: 'block' }, touched: ['name'] }) &&
+      isEqual(oldRequest, { data: {}, touched: [] })
+
+    if (payloadIsCorrect && newRequest.data?.name === 'block') {
+      return false
+    }
+
+    return true
+  }
+
+  return (
+    <div>
+      <h1>Precognition - onBefore</h1>
+
+      <Form action="/precognition/default" method="post" validationTimeout={100}>
+        {({ errors, invalid, validate, validating }) => (
+          <>
+            <div>
+              <label htmlFor="name">Name:</label>
+              <input
+                id="name"
+                name="name"
+                onChange={() =>
+                  validate('name', {
+                    onBeforeValidation: handleBeforeValidation,
+                  })
+                }
+              />
+              {invalid('name') && <p className="error">{errors.name}</p>}
+            </div>
+
+            <div>
+              <label htmlFor="email">Email:</label>
+              <input id="email" name="email" onChange={() => validate('email')} />
+              {invalid('email') && <p className="error">{errors.email}</p>}
+            </div>
+
+            {validating && <p className="validating">Validating...</p>}
+
+            <button type="submit">Submit</button>
+          </>
+        )}
+      </Form>
+    </div>
+  )
+}