[✨] Support complex nested forms

[tuurbo]

Is your feature request related to a problem?

As of Qwik 0.19.3 there isn't a way to submit and validate complex nested form data as seen below.

export const useAction = globalAction$(
  async (formData, ctx) => {
    console.log(formData);
    /*
    {
      todo: [
        { title: 'Wash clothes' },
        { title: 'Buy Food', desc: 'Apple, banana' },
      ];
    }
    */
  },
  zod$({
    todo: z.array(
      z.object({
        title: z.string(),
        desc: z.string().optional(),
      }),
    ),
  }),
);

Describe the solution you'd like

{[
  { title: 'Wash clothes' },
  { title: 'Buy Food', desc: 'Apple, banana' },
].map((todo, i) => {
  <>
    <input type="text" name={`todo.${i}.title`} value={todo.title} />
    <input type="text" name={`todo.${i}.desc`} value={todo.desc} />
  </>;
})}

Describe alternatives you've considered

{[
  { title: 'Wash clothes' },
  { title: 'Buy Food', desc: 'Apple, banana' },
].map((todo, i) => {
  <>
    <input type="text" name={`todo[${i}].title`} value={todo.title} />
    <input type="text" name={`todo[${i}].desc`} value={todo.desc} />
  </>;
})}

Additional context

No response

[shairez]

@adamdbradley this will be solved by the forms solution you're working on right?

[tuurbo]

Can I ask what other features for forms @adamdbradley is working on? I'm almost 5 months into migrating a large ecommerce site and forms have been the biggest pain point.

My goal for my forms was to make them validate onInput$ and onBlur$, not just onSubmit$. I've found that impossible so far. Every attempt runs into a major brick wall. Most issues seem to stem from lazy loading race conditions, for example..

• input values are erased or you lose part of what you were typing (start typing before the input component is loaded and when it does load, it resets to the inputs initial value or removes a couple characters)
• breaking 3rd party autofill (ssr rendered input is replaced by lazy loaded input, which erases 3rd party data-attrs, eg: dashlane)
• a scenario where you change a value of an input and when you click a submit button the value isn't available yet in the store (because it hasnt finished loading), so the initial input value is submitted instead of the new value.

I've tried implementing a form library completely separate from action$ and I've also tried one that builds upon action$. No luck so far.

[tuurbo]

Would be nice if this functionality was built into action$. Because without it, the UX isn't great for any size form in my opinion. For example if a customer submits a form that doesn't pass validation and you display errors to indicate which inputs need to be corrected. If the customer types in the correct info that satisfies the validator for that individual input, it should no longer display the error for that input (which is currently not built-in action$).