UseField in parent component

[Gyurmatag]

So I've got a TextInput.vue file, whcih looks like this:

<template>
  <div class="flex flex-col space-y-2">
    <label class="text-gray-800 dark:text-gray-300" :for="name">{{
      label
    }}</label>
    <input
      :id="name"
      :name="name"
      :type="type"
      :value="inputValue"
      class="rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 transition duration-300 ease-in-out focus:border-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:focus:border-blue-500"
      :class="{
        'border-red-300 focus:border-red-500': meta.touched && !meta.valid,
        'focus:border-green-500': meta.valid,
      }"
      @input="handleChange"
      @blur="handleBlur"
    />
  </div>
</template>

<script setup>
import { useField } from "vee-validate";

const props = defineProps({
  type: {
    type: String,
    default: "text",
  },
  value: {
    type: String,
    default: "",
  },
  name: {
    type: String,
    required: true,
  },
  label: {
    type: String,
    required: true,
  },
});

const {
  value: inputValue,
  handleBlur,
  handleChange,
  meta,
} = useField(props.name, undefined, {
  initialValue: props.value,
});
</script>

And I've got a Parent.vue file which uses that child component like this:

<form
      :validation-schema="currentSchema"
      class="space-y-6"
      @submit="onSubmit"
>
      <common-text-input
          name="password"
          type="text"
          label="Password"
      />
</form>

In the parent component I want to get the value for the password to watch it when it changes and calculate a Password strength number. I tried to use 'useField' like this in the Parent.vue file, but it's not working:
const password = useFieldError('password');

Can you please help me how I get a ref of my password custom input in the parent component?

Thank you very much!

[logaretm]

You can use useForm instead of <Form /> component and get the values for your form:

const { values } = useForm({
  validationSchema: currentSchema
});

// Field value
values.password;