How can i get the values of forms programatically using template refs?

[gitamgadtaula]

I have a custom validation trigger in my app using vue template refs. I can get to call the validate() method, but I can't seem to the get form values. Can anybody please point me to the right direction? I must be missing something, it should be pretty straightforward. I am asking this after days of constant reviewing the docs ending as a failure every-time.

<Form ref="myForm" :validation-schema="schema">
...
</Form>
<script setup>
async function onSubmit() {
  let validation = await this.$refs.myForm.validate();
  if (validation.valid) {
    sendRequest(this.$refs.myForm.values); // I need the values of form here, but somehow I can't
  } else if (validation.errors) {
    console.log(validation.errors);
  }
}
</script>

Any help would be highly appreciated, thanks !

[gitamgadtaula]

@logaretm Can you please please help me out ?

[gitamgadtaula]

Was dwelling whether to use Formkit or Vee-validate during initial step, gave vee-validate a chance. It looks good but I don't feel it has a good documentation or at least me and my team felt so.I guess moving to Formkit never felt this urgent.

[logaretm]

Always up to you to use whatever tool to do the job for you. The documentation could use a lot of improvements but I'm not working full-time on this and only do maintenance on weekends so not have enough time for docs.

Anyways, I provided an answer for your issue here.

[logaretm]

Wondering why you need to call validate manually as part of the submission function when you can submit the form and get the values as the first argument.

<template>
  <Form @submit="onSubmit" :validation-schema="schema">
    ....
    <button>Submit</button>
  </Form>
</template>

<script setup>
import { Form, Field, ErrorMessage } from 'vee-validate';
import * as yup from 'yup';

const schema = yup.object({
  email: yup.string().required().email(),
  password: yup.string().required().min(8),
});

function onSubmit(values) {
  // Submit values to API...
  alert(JSON.stringify(values, null, 2));
}

In any case, you can also get the values from the $refs as of 4.7.4 with getValues function. This is still very recent (yesterday) and I have to update the docs on the weekend or when I have time on workdays.

<template>
	<Form ref="myForm" :validation-schema="schema">
	...
	</Form>
</template>

<script setup>
async function onSubmit() {
  let validation = await this.$refs.myForm.validate();
  if (validation.valid) {
    const values = this.$refs.myForm.getValues();
    sendRequest(this.$refs.myForm.values); // I need the values of form here, but somehow I can't
  } else if (validation.errors) {
    console.log(validation.errors);
  }
}
</script>