CODEWITHSUNDEEP
vue.jsvuetify.jsyupvee-validate
Igor
Igor

Reputation: 1

vee-validate useFieldArray trigger errors when mounted

I am using vee-validate with yup and vuetify for some form validations. The thing is that one of my fields is an array of objects, like this:

interface Birthdate {
  day: number | null
  month: number | null
  year: number | null
}

So I am using this code to try to validate this field:

const { handleSubmit, errors } = useForm({
  initialValues: {
    postalCode: null,
    birthDates: []
  },
  validationSchema: yup.object({
    postalCode: yup.string().required(),
    birthDates: yup.array().of(
      yup
      .object({
        day: yup.string().required(),
        month: yup.string().required(),
        year: yup.string().required()
      })
    )
  }),
  validateOnMount: false
})

const postalCode: FieldContext<string | null> = useField('postalCode')
const birthDates: FieldArrayContext<Birthdate > = useFieldArray('birthDates')

And the template is:

<form ref="moreInfoForm" @submit.prevent="submit">
      <div>
        <v-card-text class="text-medium-emphasis text-caption">
          Postal Code
        </v-card-text>
        <v-text-field
          name="postal-code"
          v-model="postalCode.value.value"
          placeholder="CP"
          :error-messages="errors['postalCode']"
        ></v-text-field>
      </div>
      <div class="birth-date-container">
        <div v-for="(field, index) in birthDates.fields.value" :key="index" class="grid-inputs">
          <v-text-field
            :name="`birthDates[${index}].day`"
            v-model="field.value.day"
            placeholder="Day"
            :error-messages="errors[`birthDates[${index}].day`]"
          ></v-text-field>
          <v-text-field
            :name="`birthDates[${index}].month`"
            v-model="field.value.month"
            placeholder="Month"
            :error-messages="errors[`birthDates[${index}].month`]"
          ></v-text-field>
          <v-text-field
            :name="`birthDates[${index}].year`"
            v-model="field.value.year"
            placeholder="Year"
            :error-messages="errors[`birthDates[${index}].year`]"
          ></v-text-field>
        </div>
      </div>
    </form>

I set validateOnMount to false but only the postalCode field is not validated when form is mounted. My array of birthDates is validated on mounted and it should be the same as postalCode.

Am I missing something?

Thanks in advance!!

Upvotes: 0

Views: 895

Answers (1)

Benoit Blanchon
Benoit Blanchon

Reputation: 14571

I had a similar issue and discovered that adding a call to useField() solves the issue.

const birthDates: FieldArrayContext<Birthdate > = useFieldArray('birthDates')
useField('birthDates')

Not only does it solve the initial validation issue, but it allows you to get the errorMessage for the array. For example, this is where errors about the number of items would go.

You can also use the returned validate function to trigger a validation of the array length when pushing or removing items because it's not done automatically.

Upvotes: 1

Related Questions