From dee85ff206814ba96cf72e64b07d731c905769c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?=
 <43729152+fulopkovacs@users.noreply.github.com>
Date: Sun, 28 Sep 2025 16:29:17 +0200
Subject: [PATCH] docs: update the large-form example to work with async
 validators

---
 .../large-form/src/features/people/page.tsx   | 25 -------------------
 .../src/features/people/shared-form.tsx       | 25 +++++++++++++++++++
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/examples/react/large-form/src/features/people/page.tsx b/examples/react/large-form/src/features/people/page.tsx
index 3743662bd..a81d37c5e 100644
--- a/examples/react/large-form/src/features/people/page.tsx
+++ b/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))
     },
diff --git a/examples/react/large-form/src/features/people/shared-form.tsx b/examples/react/large-form/src/features/people/shared-form.tsx
index 4a8afc032..ea5402b7e 100644
--- a/examples/react/large-form/src/features/people/shared-form.tsx
+++ b/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
+    },
+  },
 })