form-create

Create TanStack Form

Create a form component with TanStack Form and Zod validation.

Instructions

1. Gather Information (if not provided via args):

   • Ask for the form name (e.g., CreatePostForm, EditUserForm)
   • Ask for the feature it belongs to
   • Ask for the fields the form should have
   • Ask if it should integrate with a mutation hook

2. Create Zod Schema in src/features/{feature}/schemas/{name}Schema.ts:

   import { z } from 'zod'
   
   export const {name}Schema = z.object({
     title: z.string().min(3, 'Title must be at least 3 characters'),
     content: z.string().min(10, 'Content must be at least 10 characters'),
     email: z.string().email('Invalid email address'),
     // Add more fields as needed
   })
   
   export type {Name}FormData = z.infer<typeof {name}Schema>
   

3. Create Form Component in src/features/{feature}/components/{Name}Form.tsx:

   For a create form:

   import { useForm } from '@tanstack/react-form'
   import { zodValidator } from '@tanstack/zod-form-adapter'
   import { {name}Schema, type {Name}FormData } from '../schemas/{name}Schema'
   import { useCreate{Feature} } from '../hooks'
   import { FormField } from '@/components/ui/FormField'
   
   interface {Name}FormProps {
     onSuccess?: () => void
   }
   
   export function {Name}Form({ onSuccess }: {Name}FormProps) {
     const create{Feature} = useCreate{Feature}()
   
     const form = useForm({
       defaultValues: {
         title: '',
         content: '',
         // ... default values for all fields
       } satisfies {Name}FormData,
       onSubmit: async ({ value }) => {
         await create{Feature}.mutateAsync(value)
         onSuccess?.()
       },
       validatorAdapter: zodValidator(),
       validators: {
         onChange: {name}Schema,
       },
     })
   
     return (
       <form
         onSubmit={(e) => {
           e.preventDefault()
           form.handleSubmit()
         }}
         className="space-y-4"
       >
         <form.Field
           name="title"
           children={(field) => (
             <div className="form-field">
               <label htmlFor={field.name}>Title</label>
               <input
                 id={field.name}
                 value={field.state.value}
                 onChange={(e) => field.handleChange(e.target.value)}
                 onBlur={field.handleBlur}
                 aria-invalid={field.state.meta.errors.length > 0}
                 aria-describedby={`${field.name}-error`}
               />
               {field.state.meta.isTouched && field.state.meta.errors.length > 0 && (
                 <span id={`${field.name}-error`} className="error" role="alert">
                   {field.state.meta.errors[0]}
                 </span>
               )}
             </div>
           )}
         />
   
         <form.Field
           name="content"
           children={(field) => (
             <div className="form-field">
               <label htmlFor={field.name}>Content</label>
               <textarea
                 id={field.name}
                 value={field.state.value}
                 onChange={(e) => field.handleChange(e.target.value)}
                 onBlur={field.handleBlur}
                 rows={5}
                 aria-invalid={field.state.meta.errors.length > 0}
               />
               {field.state.meta.isTouched && field.state.meta.errors.length > 0 && (
                 <span className="error" role="alert">
                   {field.state.meta.errors[0]}
                 </span>
               )}
             </div>
           )}
         />
   
         {/* Add more fields as needed */}
   
         <form.Subscribe
           selector={(state) => [state.canSubmit, state.isSubmitting]}
           children={([canSubmit, isSubmitting]) => (
             <button
               type="submit"
               disabled={!canSubmit || isSubmitting}
               className="btn btn-primary"
             >
               {isSubmitting ? 'Saving...' : 'Save'}
             </button>
           )}
         />
   
         {create{Feature}.isError && (
           <div className="error" role="alert">
             {create{Feature}.error.message}
           </div>
         )}
       </form>
     )
   }