00:00 Complex structures. This is a question that I get a lot when people are talking about making forms, because it's not always super obvious how you accomplish this, and a lot of it has to do with just the way that the web platform handles forms. So let's talk about that. If you were to do an array of elements,

00:19 like let's say we had an array of to-dos, you might do something like this, where you'd say, hey, this is a to-do array, but that's not going to work. You're not going to be able to get things by the to-do. Instead, you will say get by the name of the thing, and then you can get by milk. But yeah, that's not the only field there. So how do you get them all?

00:39 Well, there actually is a get all by that name, which we'll look at here in a second. But yeah, it's not going to work the way that you might think. What you do instead is you say, specify all of them as the same name.

00:55 And then the way that form data manages things is similar to URL search params and headers, where you can have multiple entries with the same key, and then the value can be an array of those things. And that's when you use get all. So this is not how it's stored at all,

01:14 but this is just kind of a useful way to think about it, where you have your entry name and then your entry value there. So you can do this, and it will work, but it's not the most ergonomic thing. But then also, what about having field sets, like objects

01:33 or something like that? So you can't nest forms. That's just not a thing you can do. You can make field sets, but still, once it gets slurped up into the form, it's all based off of its key. So you can't have segments of your forms that are nested, like an object would be.

01:51 So what you do instead is you just give them all the same name. But the problem is that checkboxes are kind of funny. So a checkbox, when it's checked, is going to have a value of on. When it's not checked, it won't even show up in the form data. And so if you were to do something like this

02:08 and try to make it work so you just say, oh, OK, I'll just go get all the to-dos, and then get all the completes, and then use their indexes, and poof, here I go. No, because you're going to be missing the things that don't actually exist. So this is, again, kind of a pain. So what you could do instead is you just

02:27 say to-do at 0.content, and then complete, and so on and so forth. And then you could say, get me all the entries, and then you could use some magic JavaScript to turn it into something like this. So there has to be a better way. This is not fun.

02:44 This is one area that the web platform could probably do a little bit better for us. So Conform has some built-in utilities for some of this. First of all, for objects, we have this use field set. This allows us to have some sort of config that says, hey, I've got this set of address fields,

03:04 and I want those to be as a separate object. And so then you can use this use field set. You provide the form ref or a DOM node that has a reference to the form to associate that form with this field set. And then the config for that subset of the fields.

03:22 And then you get this new fields thing, similar to the fields that we have been using already, that will have all the properties from that field set. And then when it's all parsed, you get exactly what you were hoping for in the beginning. And then for arrays, we have this use field list, which has a very similar API, but this

03:42 would be if we had our schema config that said that tasks is an array. And then you can render out this list, map that out as a task. So this would be task config that has a key on it. And then we render out the input using the conform input

04:01 utility with that task config. And that will get slurped up into the form and parsed for us and turned into the data that we were hoping for. And then combining these two ends up being kind of interesting. And especially when we're talking about a list, you want to be able to have an add and remove, right?

04:20 And so remix or conform also has a list utility that allows you to manipulate these field lists. And so here we have a button, list.remove. And we can say we want to remove a field from this set of fields.

04:39 And here's the index that we want to have removed. And then you have another button that has an add for append. And all of this works in a just wonderful way. And we're going to be doing all of that in this exercise. So that's everything here. Let me just really quickly show you what we're working toward.

04:58 So we're going to have this image chooser. And we're going to be able to do this stuff. And you can remove, you can add images. So we can add another one right here and say this one is cute. And add another one and say this one is soccer. And then we can go and delete one. We can submit. We've got multiple.

05:17 We can edit. We can swap one out for another one. And do cuddle and submit that. And all of that works, as you would expect. But what's really cool is it works without JavaScript, too. So that even if the user's internet connection is spotty or problematic, they will still

05:35 be able to use this form, which is pretty sick. So I'm excited for you to work on this. This is a pretty awesome exercise. It just gives you a view into the capabilities that Conform gives us, despite some of the funny aspects of the web platform and forms.

05:54 Conform is just awesome. And combining it with Zod gives you a pretty fantastic development and user experience. So let's go get that. And let's do that right now. Have a good time.