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'),
}),

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>

 <form.AppField name="address">
  {field => (
    <field.AddressInput
      label="Address"
      placeholder="Enter your address"
    />
  )}
</form.AppField>

The problem is that the

errors

errors

object is empty when theres an error with one of the inner portions. I could snoop around the

field.form.errors

field.form.errors

object to find what i need but that gets pretty messy. Is there a reason that

address

address

does not receieve

address1

address1

address2

address2

, etc as part of the errors? Any workarounds?

TanStack•10mo 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'),
}),

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'),
}),

 <form.AppField name="address">
  {field => (
    <field.AddressInput
      label="Address"
      placeholder="Enter your address"
    />
  )}
</form.AppField>

 <form.AppField name="address">
  {field => (
    <field.AddressInput
      label="Address"
      placeholder="Enter your address"
    />
  )}
</form.AppField>

The problem is that the

errors

errors

object is empty when theres an error with one of the inner portions. I could snoop around the

field.form.errors

field.form.errors

object to find what i need but that gets pretty messy. Is there a reason that

address

address

does not receieve

address1

address1

address2

address2

, etc as part of the errors? Any workarounds?

Form Composition + Object

Form Composition + Object

Similar Threads