Nested objects and arrays about remix-forms

[danielweinmann]

Hey, @gederer! Can you share a complete example of how you made it work with us? I'm designing an API to deal with nested objects and arrays, and it would be great to contemplate your use case when thinking about it.

[danielweinmann]

Hey, @02JanDal! Thanks for creating this issue 💪

We don't have support for objects and arrays in the schema yet, but it is high on our priority list to add it :)

In the meantime, you can still use Remix Forms for the schema above, but instead of rendering a Field component, you'll need to render a custom UI directly inside of Form's children, with the help of register and other react-hook-form props. I haven't tested it yet, but I think all the client-side validations will work correctly that way.

The server-side validations do work with objects and arrays already, so you're covered on that end.

Can you please let us know if this works?

[gederer]

Hey, @danielweinmann. I tried this with a set off checkboxes, all with the same name. This is my Zod schema:

const schema = z.object({
  name: z.string().nonempty(),
  age: z.number(),
  hobbies: z.array(z.string()).nonempty("Must have at least one hobby")
});

When I have two or more checkboxes checked, I get the correct values passed into my mutation function. But, if I have only one checkbox checked, the form doesn't submit. I (strongly!) suspect this is because a single value is passed as a scalar, rather than as an array. Do you know how I might patch this up?

Update:

Changed my Zod schema to:

const schema = z.object({
  name: z.string().nonempty(),
  age: z.number(),
  hobbies: z.union([z.string().optional(), z.array(z.string()).optional()]).optional()
    .transform(val => typeof val !== "undefined" ? Array.isArray(val) ? val : [val] : [])
});

Now, it submits correctly with a single checkbox or multiple checkboxes checked. But, when I submit with zero checkboxes checked, it focuses (but does not check) the first checkbox without submitting. Oddly, if I submit a second time after the first checkbox is focused, it does submit correctly. Not sure why.

Update 2 (Finally got it):

const schema = z.object({
  name: z.string().nonempty(),
  age: z.number(),
  hobbies:
    z.preprocess(
      val => !!val ? Array.isArray(val) ? val : [val] : [],
      z.array(z.string())
    )
});