How to automatically submit form once all Form fields are valid

[y3hhhhhh]

Apologies if this is a noob question, I’m a Vue newbie. I’ve spent a day working through the docs and wasn’t able to find a way to attack this with my higher-order components approach. If there is a better place to post, please let me know.

Given a Form with 1 or more Field components, how can I automatically submit the form (or call the addPerson() method), once all Form Fields are valid? I.e. we don’t want the user to have to click the submit button, once all fields are valid it should automatically submit.

Is there Form metadata (in the example below) I can access outside of the template tags? i.e watch for the Form to become valid.

I've tried some of the examples in #853, but I wasn't able to access the this.fields instance method.

"vue": "^3.0.0",
"vee-validate": "^4.5.10"

For example:

<template>
<Form :validation-schema="schema">
  <label for="fullName">Your full name</label>
  <Field id="fullName" name="fullName" type="text" v-model="fullName"/>
  <ErrorMessage name="fullName" class="mt-2 text-sm text-red-600"/>
</Form>
</template>

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

export default {
  name: 'MyComponent',
  components: {
    ErrorMessage, Form, Field
  },
  setup () {
    const schema = yup.object({
      fullName: yup.string().required().label('Full Name')
    })
    return {
      schema
    }
  },
  data () {
    return {
      fullName: null
    }
  },
  methods: {
    addPerson () {
      // Makes call to API.
    }
  }
}
</script>

P.s. Thanks for your great work on this!

[logaretm]

I converted this to a discussion since it is more of a question than an issue.

Is there Form metadata (in the example below) I can access outside of the template tags

You should use the useForm composition function instead of the Form component for that purpose (you can still use <Field> component). Check the docs here.

 function setup () {
    const schema = yup.object({
      fullName: yup.string().required().label('Full Name')
    })

    const { meta } = useForm({ validationSchema: schema });

    return {
      meta,
      schema
    }
  },

Then you are free to watch the meta.valid and trigger a submit manually.

[y3hhhhhh]

Works a treat - thank you!