Validating Simple Array of Objects (v4)

[alecStewart1]

Hello,

I apologize ahead of time if this question has been asked repeatedly, but I'm finding it difficult to get a clear cut answer for something I would think is a pretty common scenario.

I'll try to keep this as simple as possible as to maybe be helpful for anyone who comes across this.

In a project, you want to have a form to add multiple people by their first and last name. Using vee-validate and zod, we know the following:

• First and last name are strings,
• Both first and last name will not able able to be empty
• Both first and last name should only include alphabetical characters

So our schema will look like so to start:

const schema = toTypedSchema(
  z.object({
    firstName: z.string().regex('^[A-zÀ-ž]+$'),
    lastName: z.string().regex('^[A-zÀ-ž]+$')
  })
);

Simple as. However we want to be able to add or remove potential people from a list, not just be able to add one at a time. So we now have the following:

const schema = toTypedSchema(
  z.array(
    z.object({
      firstName: z.string().regex('^[A-zÀ-ž]+$'),
      lastName: z.string().regex('^[A-zÀ-ž]+$')
    })
  ).nonempty()
);

We now attach this to the useForm composable:

const { errors } = useForm({
  validationSchema: schema,
  validateOnMount: false, // initial values will have empty key value pairs on mount
  initialValues: {
    people: [{ firstName: null, lastName: null }]
  }
});

Now, assuming we go along with that's in the documentation, we need to use useFieldArray:

const { remove, push, fields } = useFieldArray('people');

Now we need to create the actual template for the application. Presumably we have to do something like this:

 <div v-for="(field, idx) in fields" :key="field.key">
    <div class="flex flex-col">
        <label :for="`people.[idx].firstName`">First Name:</label>
        <input :id="`people.[idx].firstName`" v-model="people[idx].firstName">
    </div>
    <div class="flex flex-col">
        <label :for="`people.[idx].lastName`">Last Name:</label>
        <input :id="`people.[idx].lastName`" v-model="people[idx].lastName">
    </div>
</div>

And then of course we could add in the "Add" and "Remove" buttons.

My question is: is this a correct pattern?

I highly doubt this is an unusual usecase, but I wanted to confirm this is how you would handle something like this.