Manually Validating Fields in Vee-Validate v4

[Verickt]

Hello,

I am using Vee-Validate version 4 for form validation in my Vue 3 application. My problem is that I am unable to manually validate my form fields using refs in the Vue 3 Composition API. I have tried creating refs for each of my form fields and validating them one by one in my doOrder function, but the refs always seem to return null.

Here's an example of my Vue component:

`

<script lang="ts" setup> import { reactive, ref } from "vue"; import { usePortingStore } from "@/Scripts/Stores/usePortingStore"; const portingStore = usePortingStore(); const formFields = reactive({ ownerInformation: { firma: ref(null), // Other fields... }, contactInformation: { // Fields... }, }); const doOrder = async () => { for (const category of Object.values(formFields)) { for (const field of Object.values(category)) { const result = await field.value.veeField.validate(); // Rest of validation logic... } } }; </script>

`

I am trying to validate the form fields manually in the doOrder function. However, the field.value.veeField.validate() call doesn't work because field is always null.

I've looked through the Vee-Validate documentation and various forum threads, but I can't seem to find a solution to this issue. Any help would be greatly appreciated.

You may ask why I am not using useForm or useField. The components I am using bflInput do a 'useField' under the hood. In the browser devtools all these fields appear as 'standalone' fields. I tried wrapping a

around them but that form will have 0 fields then in the devtools. Reading in this repo I found out that there is no such thing as adding form fields to an initialized form due to provide/inject. It does work when I do a 'proper' ref on each of the fields and then go validate them one by one (the bflInput exposes the veeField). I am aiming for a better DX tho

Any hint is greatly appreciated! Thank you