vuelidate problem validation of array of string(primitives)

38 views Asked by At

I am front end developer from Ukraine. I have a problem validating the form with help vuelidate 2, cannot validate an array of strings or numbers (everything is fine with objects). I will be grateful for your help

here is a simplified form that I am trying to create:

<template>
  <div v-for="(item, index) in formData.values" :key="index">
    <input type="text" :value="formData.values[index]" @input="onChange(index, $event)" />
  </div>

  <button @click="addItem">add</button>
  <button @click="submit">submit</button>
</template>
<script setup lang="ts">
import { computed, reactive } from 'vue'
import { helpers, required } from '@vuelidate/validators'
import useVuelidate from '@vuelidate/core'

const formData = reactive({ values: [''] })

const rules = computed(() => ({
  values: {
    $each: { required },
    // $each: helpers.forEach({ required }), also not working
  },
}))

const $v = useVuelidate(rules, formData)

const addItem = () => {
  formData.values.push('')
}

const submit = async () => {
  const isValid = await $v.value.$validate()
  if (isValid) {
    console.log('ok')
  } else {
    console.log('error', $v.value.$errors)
  }
}

const onChange = (index: number, event: any) => {
  const value = event.target.value
  formData.values.splice(index, 1, value)
}
</script>
0

There are 0 answers