feat (form-core): Merging Form-level server errors with Field-level errors

examples/react/next-server-actions/src/app/action.ts

@@ -9,9 +9,13 @@ import { formOpts } from './shared-code'
 const serverValidate = createServerValidate({
   ...formOpts,
   onServerValidate: ({ value }) => {
-    if (value.age < 12) {
-      return 'Server validation: You must be at least 12 to sign up'
-    }
+    if (value.age < 12)
+      return {
+        fields: {
+          age: 'Server validation: You must be at least 12 to sign up',
+        },
+        form: 'Form level Error: Age must be at least 12',
+      }
   },
 })
 

examples/react/next-server-actions/src/app/client-component.tsx

@@ -3,7 +3,6 @@
 import { useActionState } from 'react'
 import { mergeForm, useForm, useTransform } from '@tanstack/react-form'
 import { initialFormState } from '@tanstack/react-form/nextjs'
-import { useStore } from '@tanstack/react-store'
 import someAction from './action'
 import { formOpts } from './shared-code'
 
@@ -18,14 +17,8 @@ export const ClientComp = () => {
     ),
   })
 
-  const formErrors = useStore(form.store, (formState) => formState.errors)
-
   return (
     <form action={action as never} onSubmit={() => form.handleSubmit()}>
-      {formErrors.map((error) => (
-        <p key={error as unknown as string}>{error}</p>
-      ))}
-
       <form.Field
         name="age"
         validators={{

examples/react/next-server-actions/src/app/shared-code.ts

@@ -2,7 +2,6 @@ import { formOptions } from '@tanstack/react-form/nextjs'
 
 export const formOpts = formOptions({
   defaultValues: {
-    firstName: '',
     age: 0,
   },
 })

packages/form-core/src/FormApi.ts

@@ -1130,6 +1130,35 @@
           this.options.transform?.fn(newObj)
           state = newObj.state
           this.prevTransformArray = transformArray
+
+          const serverErrorMap = this.store.state.errorMap['onServer'] as
+            | Record<string, string>
+            | undefined
+
+          if (!serverErrorMap) return state
+
+          batch(() => {
+            void (Object.values(this.fieldInfo) as FieldInfo<any>[]).forEach(
+              (field) => {
+                const fieldInstance = field.instance
+
+                if (!fieldInstance) return
+
+                if (fieldInstance.name in serverErrorMap) {
+                  fieldInstance.setMeta((prev) => ({
+                    ...prev,
+                    errorMap: {
+                      ...prev.errorMap,
+                      onServer: serverErrorMap[fieldInstance.name],
+                    },
+                  }))
+                  fieldInstance.mount()
+                }
+
+                this.validateField(fieldInstance.name, 'server')
+              },
+            )
+          })
         }
 
         return state
@@ -1503,6 +1532,20 @@
           },
         }))
       }
+
+      /**
+       *  when we have an error for onServer in the state, we want
+       *  to clear the error as soon as the user changes the value in the field
+       */
+      if (cause !== 'server') {
+        this.baseStore.setState((prev) => ({
+          ...prev,
+          errorMap: {
+            ...prev.errorMap,
+            onServer: undefined,
+          },
+        }))
+      }
     })
 
     return { hasErrored, fieldsErrorMap: currentValidationErrorMap }
@@ -1925,6 +1968,7 @@
             // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
             ...prev?.errorMap,
             onMount: undefined,
+            onServer: undefined,
           },
         }))
       }

packages/react-form/src/nextjs/createServerValidate.ts

@@ -96,20 +96,41 @@
       validationSource: 'form',
     })) as UnwrapFormAsyncValidateOrFn<TOnServer> | undefined
 
+    console.log('ON SERVER ERROR', onServerError)
+
     if (!onServerError) return values
 
-    const onServerErrorVal = (
-      isGlobalFormValidationError(onServerError)
-        ? onServerError.form
-        : onServerError
-    ) as UnwrapFormAsyncValidateOrFn<TOnServer>
+    let onServerErrorVal = undefined
+    let onServerErrorValFields = undefined
+
+    if (isGlobalFormValidationError(onServerError)) {
+      onServerErrorVal =
+        onServerError.form as UnwrapFormAsyncValidateOrFn<TOnServer>
+      onServerErrorValFields =
+        onServerError.fields as UnwrapFormAsyncValidateOrFn<TOnServer>
+    } else {
+      onServerErrorVal = onServerError as UnwrapFormAsyncValidateOrFn<TOnServer>
+    }
+
+    // Extract string values from errors if they're in object format
+    const errorsArray = onServerErrorVal
+      ? Array.isArray(onServerErrorVal)
+        ? onServerErrorVal.map((err) =>
+            typeof err === 'object' ? Object.values(err)[0] : err,
+          )
+        : [
+            typeof onServerErrorVal === 'object'
+              ? Object.values(onServerErrorVal)[0]
+              : onServerErrorVal,
+          ]
+      : []
 
     const formState: ServerFormState<TFormData, TOnServer> = {
       errorMap: {
-        onServer: onServerError,
+        onServer: onServerErrorValFields,
       },
       values,
-      errors: onServerErrorVal ? [onServerErrorVal] : [],
+      errors: errorsArray,
     }
 
     throw new ServerValidateError({