Group Fields

[arnoson]

Unless I'm missing something, right now it is not possible not make a group of fields that are nested under a parent name. Take this useFieldArray() example:

<template>
  <form @submit="onSubmit" novalidate>
    <div v-for="(field, idx) in fields" :key="field.key">
      <Field :name="`accounts[${idx}].firstName`" />
      <Field :name="`accounts[${idx}].lastName`" />
    </div>
    <button>Submit</button>
  </form>
</template>

<script setup>
import { Field, useForm, useFieldArray } from 'vee-validate';

const { handleSubmit } = useForm({
  initialValues: { accounts: [{ firstName: 'fu', lastName: 'bar' }] }
});

const onSubmit = handleSubmit(values => console.log(JSON.stringify(values));

const { fields } = useFieldArray('accounts')
</script>

Each field has to be prefixed with accounts[${idx}] this is very verbose when using many fields (per account in this example), and because the name now includes the path, it will also show up in the error messages accounts[0].firstName is not valid.

It would be great if I could write something like this:

<div v-for="(field, idx) in fields" :key="field.key">
  <FormGroup :name="`accounts[${idx}]`">
    <Field name="firstName" />
    <Field name="lastName" />
  <FormGroup>
</div>

And at the same time it would be great if any validation errors on grouped or array fields would only display the actuale field name, not the full path. And each group could also have information about the validity of it's children (which seems to be a wanted feature, see discussions #4179, #3828)

FormKit has a similar concept with Group Inputs and List Inputs.

[logaretm]

That's a nice idea, although having it as a FormGroup component declaratively may have some overhead in terms of using this.

I will see what I can do, I converted this to an issue.