The 'touched' status doesn't change for fields created with 'useFieldArray'.

[Heunsig]

Describe the bug

I created fields using useFieldArray function, but the field.touched status doesn't change from false to true when I interact with the <input> elements generated by it.

Here's the source code:

<script setup lang="ts">
import { z } from "zod";
import { zodResolver } from "@vorms/resolvers/zod";
import { useForm, useFieldArray } from "@vorms/core";

const { handleSubmit } = useForm({
  initialValues: {
    foods: ["Ramen", "Soup"],
  },
  onSubmit() {
    console.log("Successfully Submiited.");
  },
});

const { fields, append } = useFieldArray<string>("foods");
</script>

<template>
  <form @submit.prevent="(_) => handleSubmit()">
    <button
      type="button"
      @click="(_) => append('')"
      style="margin-bottom: 20px"
    >
      Add New Food
    </button>
    <div style="display: flex; flex-direction: column; gap: 12px">
      <template v-for="field in fields" :key="field.key">
        <div>
          <input type="text" v-model="field.value" v-bind="field.attrs" />
          <p style="margin: 0">Touched: {{ field.touched }}</p>
        </div>
      </template>
    </div>
  </form>
</template>

Reproduction

https://codesandbox.io/p/sandbox/nervous-burnell-qy9d4k

Steps to reproduce

No response

[Mini-ghost]

You can give this a try. Vorms needs to access the 'name' with the <input> tag to identify which field has been interacted with.

<template v-for="field in fields" :key="field.key">
  <div>
    <input
      type="text"
      v-model="field.value"
      :name="field.name"
      v-bind="field.attrs"
    />
    <p style="margin: 0">Touched: {{ field.touched }}</p>
  </div>
</template>

https://codesandbox.io/p/sandbox/dazzling-pond-snrcch?file=%2Fsrc%2FApp.vue%3A33%2C31

[Heunsig]

@Mini-ghost It works. thank you for your answer. I'm going to close this issue.

[Heunsig]

The issue is resolved by binding the 'name' attribute.