Merge branch 'main' into fix-numeric-key-explode

Author: crutchcorn

examples/react/large-form/src/features/people/page.tsx

@@ -6,31 +6,6 @@ import { peopleFormOpts } from './shared-form.tsx'
 export const PeoplePage = () => {
   const form = useAppForm({
     ...peopleFormOpts,
-    validators: {
-      onChange: ({ value }) => {
-        const errors = {
-          fields: {},
-        } as {
-          fields: Record<string, string>
-        }
-        if (!value.fullName) {
-          errors.fields.fullName = 'Full name is required'
-        }
-        if (!value.phone) {
-          errors.fields.phone = 'Phone is required'
-        }
-        if (!value.emergencyContact.fullName) {
-          errors.fields['emergencyContact.fullName'] =
-            'Emergency contact full name is required'
-        }
-        if (!value.emergencyContact.phone) {
-          errors.fields['emergencyContact.phone'] =
-            'Emergency contact phone is required'
-        }
-
-        return errors
-      },
-    },
     onSubmit: ({ value }) => {
       alert(JSON.stringify(value, null, 2))
     },

examples/react/large-form/src/features/people/shared-form.tsx

@@ -17,4 +17,29 @@ export const peopleFormOpts = formOptions({
       phone: '',
     },
   },
+  validators: {
+    onChangeAsync: async ({ value }) => {
+      const errors = {
+        fields: {},
+      } as {
+        fields: Record<string, string>
+      }
+      if (!value.fullName) {
+        errors.fields.fullName = 'Full name is required'
+      }
+      if (!value.phone) {
+        errors.fields.phone = 'Phone is required'
+      }
+      if (!value.emergencyContact.fullName) {
+        errors.fields['emergencyContact.fullName'] =
+          'Emergency contact full name is required'
+      }
+      if (!value.emergencyContact.phone) {
+        errors.fields['emergencyContact.phone'] =
+          'Emergency contact phone is required'
+      }
+
+      return errors
+    },
+  },
 })