Qwik formAction with zod preprocess isnt possible about modular-forms

[DustinJSilk]

Amazing! I’ll scope it out soon, thanks!

[fabian-hiller]

If I understand you correctly, you want to convert a comma separated string of emails into an array. This would mean that the input of a field has a different type than the output. Currently this behavior is not supported by Modular Forms. Modular Forms currently uses the schema only for validation and ignores its output. I think the errors will go away if you use z.input instead of z.infer.

You can now do the following: If you need the array in your component, I suggest to do the conversion with (or without) your schema in useComputed$ independently from Modular Forms. If you need the array in your action, I recommend to do the conversion directly in the action yourself.

Furthermore, if you are interested in saving bundle size, you can validate your form with my new project Valibot: https://github.com/fabian-hiller/valibot

[DustinJSilk]

Thanks this was really helpful!
I've ended up validating the emails using a custom schema and then joining/splitting the strings in the action as suggested.

Does zod import a large bundle size even after qwik optimisations and will your library work with Qwik and modular forms out of the box? I've added an issue in my tracker to take a look at your library soon, a quick glance and it looks great!

For reference, this is my solution to the problem if anyone else ever needs it:

function splitEmails(val: string) {
  return (val as string)
    .split(/,\s*/)
    .map((e) => e.trim())
    .filter((e) => !!e)
}

const emailList = z.custom<string>((val) => {
  const emails = splitEmails(val as string)
  const valid = z.array(z.string().email()).safeParse(emails)
  return valid.success
}, $localize`Please check all emails are valid`)

const schema = z
  .object({
    billings: emailList,
  })
  .strict()
  
type NotificationsForm = z.infer<typeof schema>

export const useFormAction = formAction$<NotificationsForm>(async (data, ev) => {
   // call splitEmails(data.billings) and save data
}, zodForm$(schema))

[fabian-hiller]

Yes Zod currently requires at least 11 KB, even for simple schemas. Valibot is supported in the latest version of Modular Forms in conjunction with Qwik. Native support in Qwik independent of Modular Forms will probably follow next week.

https://modularforms.dev/qwik/guides/validate-your-fields#schema-validation

[fabian-hiller]

You can check the bundle size with bundlejs.

Zod: https://bundlejs.com/?q=zod&treeshake=%5B%7B+string+%7D%5D
Valibot: https://bundlejs.com/?q=valibot&treeshake=%5B%7B+string+%7D%5D