TanStackT
TanStack•8mo ago•
63 replies
clean-aquamarine

Form Composition + Object

Hey! Loving Form so far. I've come across a more complex use case that I'd love some help with. I have the following zod set up:
address: z.object({
  address1: z.string().min(1, 'Address is required'),
  address2: z.string().optional(),
  city: z.string().min(1, 'City is required'),
  region: z.string().min(1, 'Region is required'),
  postalCode: z.string().min(1, 'Postal code is required'),
  country: z.string().min(1, 'Country is required'),
}),

Now, the tricky aspect is that I'd like to just have one component control all of those fields. It's like smart google address form input where you type part of your address, it finds it, and the fills it out:
 <form.AppField name="address">
  {field => (
    <field.AddressInput
      label="Address"
      placeholder="Enter your address"
    />
  )}
</form.AppField>

The problem is that the errors object is empty when theres an error with one of the inner portions. I could snoop around the field.form.errors object to find what i need but that gets pretty messy. Is there a reason that address does not receieve address1, address2, etc as part of the errors? Any workarounds?
Was this page helpful?