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