NuxtN
Nuxt•2y ago
Omnislash

UForm schema array

Hello,

I need to create an extensible form for my project
I'm using zod, which looks like this (no problem on that side)
const entryForm = z.object({
    id: z.number(),
    title: z.string().min(1, 'Title too short'),
    description: z.string()
})

const attachForm = z.array(entryForm);

type EntryForm = z.infer<typeof entryForm>;
type AttachForm = z.infer<typeof attachForm>;

const extState: AttachForm = reactive([]);


I then go over the array to display the form :
<UForm :schema="attachForm" :state="extState" class="space-y-4" @submit="trySubmit">

  <div v-for="item in extState">
    Group {{ item.id }}
    <UFormGroup label="Title" name="title">
      <UInput v-model="item.title" placeholder="Title"></UInput>
    </UFormGroup>
    <UFormGroup label="Description" name="description">
      <UInput v-model="item.description" placeholder="Description"></UInput>
    </UFormGroup>
  </div>

  <UButton type="submit"> Submit </UButton>
</UForm>


The validation itself works but.... I can't seem to find how to name the UFormGroup for the errors to be printed within the form.

Any idea ^^" ?
Thanks
Was this page helpful?