chore: fix CI

TanStack · Mar 18, 2024 · 35bad6f · 35bad6f
1 parent 6f8332d
commit 35bad6f
Show file tree

Hide file tree

Showing 3 changed files with 173 additions and 138 deletions.
diff --git a/examples/react/simple/src/index.tsx b/examples/react/simple/src/index.tsx
@@ -17,8 +17,8 @@ function FieldInfo({ field }: { field: FieldApi<any, any, any, any> }) {
 export default function App() {
   const form = useForm({
     defaultValues: {
-      password: '',
-      password_confirm: '',
+      firstName: '',
+      lastName: '',
     },
     onSubmit: async ({ value }) => {
       // Do something with form data
@@ -37,30 +37,23 @@ export default function App() {
         }}
       >
         <div>
+          {/* A type-safe field component*/}
           <form.Field
-            name="password"
-            children={(field) => (
-              <>
-                <label htmlFor={field.name}>Last Name:</label>
-                <input
-                  id={field.name}
-                  name={field.name}
-                  value={field.state.value}
-                  onBlur={field.handleBlur}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                />
-                <FieldInfo field={field} />
-              </>
-            )}
-          />
-        </div>
-        <div>
-          <form.Field
-            name="password_confirm"
+            name="firstName"
             validators={{
-              onChangeListenTo: ['password'],
-              onChange: ({ value, fieldApi }) =>
-                fieldApi.form.getFieldValue('password') === value ? undefined : 'Passwords do not match'
+              onChange: ({ value }) =>
+                !value
+                  ? 'A first name is required'
+                  : value.length < 3
+                    ? 'First name must be at least 3 characters'
+                    : undefined,
+              onChangeAsyncDebounceMs: 500,
+              onChangeAsync: async ({ value }) => {
+                await new Promise((resolve) => setTimeout(resolve, 1000))
+                return (
+                  value.includes('error') && 'No "error" allowed in first name'
+                )
+              },
             }}
             children={(field) => {
               // Avoid hasty abstractions. Render props are great!
@@ -79,7 +72,26 @@ export default function App() {
               )
             }}
           />
-        </div>        <form.Subscribe
+        </div>
+        <div>
+          <form.Field
+            name="lastName"
+            children={(field) => (
+              <>
+                <label htmlFor={field.name}>Last Name:</label>
+                <input
+                  id={field.name}
+                  name={field.name}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                <FieldInfo field={field} />
+              </>
+            )}
+          />
+        </div>
+        <form.Subscribe
           selector={(state) => [state.canSubmit, state.isSubmitting]}
           children={([canSubmit, isSubmitting]) => (
             <button type="submit" disabled={!canSubmit}>