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>

`