array validation with own inputs

[asmarcin]

hi,

i need to create subcollection validator (for now im testing it with just collection)
in docs i see example (https://vee-validate.logaretm.com/v4/examples/array-fields/) but there is used Field component, i need use my own components, i see on internet examples that has useField inside input component, but i cant do this, because i will use validator only in few pages, not in whole app

Problem: in my code new entries are always dirty
how i should handle it?

Code:

<template>
  <form @submit="onSubmit">
    <div v-for="(field, idx) in fields" :key="field.key">
      <input v-model="field.value.url" type="url" />
      {{ errors['links['+idx+'].url'] }}
      <button type="button" @click="remove(idx)">Remove</button>
    </div>
    <button type="button" @click="addField">Add</button>
    <button>Submit</button>
  </form>
  {{ errors }}
</template>

<script setup>
import { ref } from "vue";
import { useForm, useFieldArray, FieldArray } from 'vee-validate';
import * as yup from 'yup';


const schema = yup.object({
  links: yup
    .array()
    .of(
      yup.object().shape({
        url: yup.string().url().required().label('URL'),
      })
    )
    .strict(),
});

const { handleSubmit, errors, values } = useForm({
  initialValues: {
    links: [
      { url: 'https://github.com/logaretm' }
    ],
  },
  validationSchema: schema,
  validateOnMount: false, 
});

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

const addField = () => {
  push({ url: '' });
};

const onSubmit = handleSubmit(values => {
  console.log(JSON.stringify(values, null, 2));
});
</script>

[asmarcin]

ok, i think i can use Field component but with slot :), then i can use tools from vee-validate and my own input