Form: v-slot="$form" doesn't handle nested array of objects

[jarobober]

Describe the bug

Couldn't handled properly form data which is object with nested array of objects. Looks like v-slot="$form" doesn't support nested arrays.

That's our form data:
const data = ref({ username: '', emails: [ { title: '', address: '', }, { title: '', address: '', }, ], });

That's what v-slot="$form" returns:
{ "valid": true, "username": { "value": "", "touched": false, "dirty": false, "pristine": true, "valid": true, "invalid": false, "error": null, "errors": [] }, "title": { "touched": false, "dirty": false, "pristine": true, "valid": true, "invalid": false, "error": null, "errors": [] }, "address": { "touched": false, "dirty": false, "pristine": true, "valid": true, "invalid": false, "error": null, "errors": [] } }

Due to that we can't validate it using yup. We are currently introducing PrimeVue into new version of our app so handling nested arrays and objects in forms would be needed.

If there is an alternative way to achieve this, any guidence would be greatly appreciated.
Best regards!

Reproducer

https://stackblitz.com/edit/pgshym?file=src%2FApp.vue

PrimeVue version

4.2.4

Vue version

4.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chrome 131.0

Steps to reproduce the behavior

No response

Expected behavior

No response

[saidtaylan]

Yes. I have tried way @jarobober but i cannot succeed as well. I want to add additional objects dynamically to array and validate it. But i cannot iterate over the loop.

[Mihaszki]

Yes. Same problem as @jarobober
This is quite important for more complex forms with many inputs.

[arikanaydin]

Yes, Same problem as @jarobober
`const resolver = ref(
yupResolver(
yup.object().shape({
sourceName: yup.string().required('Source name is required.'),
locales: yup
.array()
.of(
yup.object().shape({
name: yup.string().required('Name is required.'),
})
)
.required('Locales are required.')
.test('all-names-filled', 'All locales must have a name.', (value) => {
return value?.every((locale) => locale.name.trim() !== '');
}),
})
)
);
const initialValues = reactive({
sourceName: "",
locales: languages.value.map((lang) => ({ name: "", code: lang.code })),
})

  <div v-for="(lang, index) in initialValues.locales.sort((a,b) => (a.code > b.code) ? 1 : ((b.code > a.code) ? -1 : 0))" :key="lang.code" class="col-span-3">
    <FloatLabel variant="in">
      <InputText
          :name="`locales[${index}].name`"
          :id="`${lang.code}_name`"
          class="w-full"
          v-model="lang.name"
      />
      <label :for="`${lang.code}_name`">{{ lang.code }} Name </label>
    </FloatLabel>
    <Message
        v-if="($form as any).locales && ($form as any).locales[index]?.name?.invalid"
        severity="error"
        size="small"
        variant="simple"
    >
      {{ ($form as any).locales[index]?.name?.error?.message || 'Invalid value' }}
    </Message>


  </div>

`

[gimler]

stackblitz example
https://stackblitz.com/edit/kay7pkm2?file=src%2FApp.vue

[Matheusfrej]

Hi, having the same problem! Im using zod for validation. Can't find a way have nested array of objects.

[mertsincan]

Fixed in 536d21c

You can update the name prop using index.

Exp;

<Form v-slot="$form" :initialValues="data" :resolver="resolver" @submit="onFormSubmit" class="flex flex-col gap-4 w-full">
    Data in form: {{ $form }}
    <div class="flex flex-col gap-1">
        <InputText v-model="data.username" name="username" type="text" placeholder="Username" fluid />
        <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
    </div>
    Email Addresses:
    <div v-for="(item, index) in data.emails" class="flex flex-col gap-1">
        Address {{ index + 1 }}
        <InputText v-model="data.emails[index].title" :name="`emails[${index}].title`" type="text" placeholder="Email Title" fluid />
        <Message v-if="$form.emails?.[index]?.title?.invalid" severity="error" size="small" variant="simple">{{ $form.emails[index].title.error.message }}</Message>
  
        <InputText v-model="data.emails[index].address" :name="`emails[${index}].address`" type="text" placeholder="Email Address" fluid />
        <Message v-if="$form.emails?.[index]?.address?.invalid" severity="error" size="small" variant="simple">{{ $form.emails[index].address.error.message }}</Message>
    </div>
    <Button type="submit" severity="secondary" label="Submit" />
 </Form>

...
const data = ref({
    username: '',
    emails: [
        {
            title: '',
            address: ''
        },
        {
            title: '',
            address: ''
        }
    ]
});

const resolver = ref(
    yupResolver(
        yup.object().shape({
            username: yup.string().required('Username is required via Yup.'),
            emails: yup.array(
                yup.object({
                    title: yup.string().required('Email title is required via Yup.'),
                    address: yup.string().required('Email address is required via Yup.')
                })
            )
        })
    )
);
...

[arikanaydin]

Fixed in 536d21c

You can update the name prop using index.

Exp;

Data in form: {{ $form }}

{{ $form.username.error.message }}

Email Addresses:

Address {{ index + 1 }} {{ $form.emails[index].title.error.message }}

    <InputText v-model="data.emails[index].address" :name="`emails[${index}].address`" type="text" placeholder="Email Address" fluid />
    <Message v-if="$form.emails?.[index]?.address?.invalid" severity="error" size="small" variant="simple">{{ $form.emails[index].address.error.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />

... const data = ref({ username: '', emails: [ { title: '', address: '' }, { title: '', address: '' } ] });

const resolver = ref(
yupResolver(
yup.object().shape({
username: yup.string().required('Username is required via Yup.'),
emails: yup.array(
yup.object({
title: yup.string().required('Email title is required via Yup.'),
address: yup.string().required('Email address is required via Yup.')
})
)
})
)
);
...

Nestet validation not working in this example.
Form states (After submited ):

Data in form: { "valid": false, "username": { "value": "", "touched": false, "dirty": false, "pristine": true, "valid": false, "invalid": true, "error": "ValidationError: Username is required via Yup.", "errors": [ "ValidationError: Username is required via Yup." ] }, "emails[0].title": { "touched": false, "dirty": false, "pristine": true, "valid": true, "invalid": false, "error": null, "errors": [] }, "emails[0].address": { "touched": false, "dirty": false, "pristine": true, "valid": true, "invalid": false, "error": null, "errors": [] }, "emails[1].title": { "touched": false, "dirty": false, "pristine": true, "valid": true, "invalid": false, "error": null, "errors": [] }, "emails[1].address": { "touched": false, "dirty": false, "pristine": true, "valid": true, "invalid": false, "error": null, "errors": [] } }

[drTragger]

Fixed in 536d21c

You can update the name prop using index.

Exp;

Data in form: {{ $form }}

{{ $form.username.error.message }}

Email Addresses:

Address {{ index + 1 }} {{ $form.emails[index].title.error.message }}

    <InputText v-model="data.emails[index].address" :name="`emails[${index}].address`" type="text" placeholder="Email Address" fluid />
    <Message v-if="$form.emails?.[index]?.address?.invalid" severity="error" size="small" variant="simple">{{ $form.emails[index].address.error.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />

... const data = ref({ username: '', emails: [ { title: '', address: '' }, { title: '', address: '' } ] });

const resolver = ref(
yupResolver(
yup.object().shape({
username: yup.string().required('Username is required via Yup.'),
emails: yup.array(
yup.object({
title: yup.string().required('Email title is required via Yup.'),
address: yup.string().required('Email address is required via Yup.')
})
)
})
)
);
...

For me, it does not work. Used the same example you have provided.

[Matheusfrej]

@arikanaydin and @drTragger , I think the version with the fix is not released yet, so the example provided is not going to work in current version.

[drTragger]

@Matheusfrej @mertsincan can you please tell me when it is going to be released? I just want to know if I can wait or I should get rid of the PrimeVue form component in my project.

Also, please verify if such cases will work properly:
name=user.username
name=emails[0].primary.address
And so on.

Thanks

[arikanaydin]

I think the biggest problem here is to address this issue in the next major version transition.

Maybe a structure such as a custom resolver can be built in the next version.
But not being able to use dynamic fields in the current version seems illogical to me.