vantezzen / auto-form

🌟 A React component that automatically creates a @shadcn/ui form based on a zod schema.
https://vantezzen.github.io/auto-form/
2.27k stars 81 forks source link

Dependencies for nested fields #69

Open imprakharshukla opened 3 months ago

imprakharshukla commented 3 months ago

Hey! I am trying to implement a rather complex form and would like to apply dependencies on nested fields. Here's a sample schema:

 inventory: z
    .array(
      z.object({
        size: z.enum([
          "XXS",
          "XS",
          "S",
          "M",
          "L",
          "XL",
          "XXL",
          "XXXL",
          "Free Size",
          "One Size",
          "Custom",
        ]),
        customSize: z.string().optional(),
        measurements: z.object({
          bust: z.number().optional(),
          waist: z.number().optional(),
        }),
        variant: z.array(
          z.object({
            name: z.string(),
            quantity: z.number(),
            price: z.number(),
          }),
        ),
      }),
    )

What i am trying to do is show and hide the custom size field depending upon the current value of the size select. The docs do not mention how to name the dependencies when dealing with nested fields.

Grateful for any help.

vantezzen commented 3 months ago

I don't know if the code correctly handles nesting but you can try using dot notation like "inventory.size" - otherwise I'd be happy to accept PRs to add this