fix: updating form examples to use zod

Author: jherr

templates/react/add-on/form/assets/src/components/demo.FormComponents.tsx

@@ -17,6 +17,25 @@ export function SubscribeButton({ label }: { label: string }) {
   )
 }
 
+function ErrorMessages({
+  errors,
+}: {
+  errors: Array<string | { message: string }>
+}) {
+  return (
+    <>
+      {errors.map((error) => (
+        <div
+          key={typeof error === 'string' ? error : error.message}
+          className="text-red-500 mt-1 font-bold"
+        >
+          {typeof error === 'string' ? error : error.message}
+        </div>
+      ))}
+    </>
+  )
+}
+
 export function TextField({
   label,
   placeholder,
@@ -39,11 +58,7 @@ export function TextField({
           className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
         />
       </label>
-      {errors.map((error: string) => (
-        <div key={error} className="text-red-500 mt-1 font-bold">
-          {error}
-        </div>
-      ))}
+      {field.state.meta.isTouched && <ErrorMessages errors={errors} />}
     </div>
   )
 }
@@ -70,11 +85,7 @@ export function TextArea({
           className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
         />
       </label>
-      {errors.map((error: string) => (
-        <div key={error} className="text-red-500 mt-1 font-bold">
-          {error}
-        </div>
-      ))}
+      {field.state.meta.isTouched && <ErrorMessages errors={errors} />}
     </div>
   )
 }
@@ -103,11 +114,7 @@ export function Select({
       >
         {children}
       </select>
-      {errors.map((error: string) => (
-        <div key={error} className="text-red-500 mt-1 font-bold">
-          {error}
-        </div>
-      ))}
+      {field.state.meta.isTouched && <ErrorMessages errors={errors} />}
     </div>
   )
 }

templates/react/add-on/form/assets/src/routes/demo.form.simple.tsx.ejs

@@ -1,4 +1,5 @@
 import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
+import { z } from 'zod'
 
 import { useAppForm } from '../hooks/demo.form'
 
@@ -10,24 +11,19 @@ export const Route = createFileRoute('/demo/form')({
 })
 <% } %>
 
+const schema = z.object({
+  title: z.string().min(1, 'Title is required'),
+  description: z.string().min(1, 'Description is required'),
+})
+
 function SimpleForm() {
   const form = useAppForm({
     defaultValues: {
       title: '',
       description: '',
     },
     validators: {
-      onBlur: ({ value }) => {
-        const errors = {
-          fields: {},
-        } as {
-          fields: Record<string, string>
-        }
-        if (value.title.trim().length === 0) {
-          errors.fields.title = 'Title is required'
-        }
-        return errors
-      },
+      onBlur: schema,
     },
     onSubmit: ({ value }) => {
       console.log(value)

templates/react/add-on/form/package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
-    "@tanstack/react-form": "^1.0.0"
+    "@tanstack/react-form": "^1.0.0",
+    "zod": "^3.24.2"
   }
 }

templates/solid/add-on/form/package.json

@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "@tanstack/solid-form": "^0.43.2"
+    "@tanstack/solid-form": "^1.0.0"
   }
 }