Nuxt•4mo ago

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([]);

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>

<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

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

UForm schema array