How can I access the Meta of the Field component

[ghanu119]

VueJS: 3.2.45
Vee Validate: 4.7.3
Yup: 0.32.11

MyComponent.Vue

<template>
<Form :validateOnModelUpdate="true">
    <Field name="mobile" as="input" :rules="mobileRules" v-model="mobile" />
</Form>
// Want to display button if the validation match
// Out side of the form
<button class="btn btn-default" v-if="IF_VALID" > Next </button>
</template>

<script>
import * as Yup from 'yup';

export default {
    data(){
        return {
              mobile: '',
              mobileRules: Yup.string().required().min(6)
        }
     }
 }
</script>

Here I want to check my mobile field is valid or not out of the Form field using Methods and want to hide/show the button of the Next.

I find too much on the issues of this repository and on stackoverflow but as per my need I do not find anything and also no way to get Meta if the Field component.

Anyone faced the same issue and passed the same scenario help me to get it.

Thanks

[logaretm]

Moved to Q&A discussions.

I would recommend using the composable useForm in that case. Since you want the state outside the form. No other way around it. It will work the same as <Form />

<template>
<Form :validateOnModelUpdate="true">
    <Field name="mobile" as="input" :rules="mobileRules" v-model="mobile" />
</Form>
// Want to display button if the validation match
// Out side of the form
<button class="btn btn-default" v-if="meta.valid" > Next </button>
</template>

<script>
import * as Yup from 'yup';

export default {
  setup() {
    const mobileRules =  Yup.string().required().min(6);
    const { meta } = useForm();

     return { meta, mobileRules };
  },
  data: () => ({ mobile: '' }),
 }

[ghanu119]

@logaretm

I have implemented it but it always return true. If I print the meta.valid it return true from the beginning and not updating.

I think it not referring the form that is used in the template.

And second thing is that I need it on Field level not form level. As I am using step by step process I want to validate field based on Field validation and if the current field is validated Next button will be enabled and then another field will be displayed. And in last Form will be submitted.

So, please suggest how to achieve or detect particular field is valid or not.

As per your suggestion my new code as:

<template>
    <div>
        <Form :validateOnModelUpdate="true">
            <Field as="input" :rules="mobileRules" name="mobile" class="form-control" type="number" v-model="mobile" placeholder="000-0000-000" />
        </Form>
        <button v-if="meta.valid"> Next </button>
    </div>
</template>

<script>
import * as Yup from 'yup';
import { useField, useForm } from 'vee-validate';

export default {
    setup(){
        const mobileRules =  Yup.string().required().min(6);
        const { meta } = useForm();
        return {
            meta,
            metaMobileField
        }
    },
    data(){
        return {
            mobile: '',
        }
    }
}
</script>

Thanks.

[ghanu119]

@logaretm
I got my solution.

Thanks for your support and help met to suggest the correct way.

<template>
    <div>
        <form > <!-- This is simple HTML form -->
            <input class="form-control" type="text" name="mobile" v-model="mobile" placeholder="000-0000-000">
            <span class="text-danger" v-if="mobileErr">{{ mobileErr }}</span>
        </form>
        <button v-if="mobileMeta.valid"> Next </button>
    </div>
</template>

<script>
import * as Yup from 'yup';
import { useField } from 'vee-validate';

export default {
    setup(){
        const mobileRules =  Yup.string().required('Required').min(10, 'Must be 10 digits');
        const { meta: mobileMeta, value: mobile, errorMessage: mobileErr} = useField('mobile', mobileRules);
        return {
            mobileMeta,
            mobile,
            mobileErr
        }
    },
    data(){
        return {
            steps: '',
            loading: false
        }
    },
    created(){

    },
    methods:{
        methodOne () {
            // Some code to perform
        },
        methodTwo () {
            // Some code to perform

        }
    }
}
</script>

[RoundRobin-fr]

Hey 👋

Thank you very much for your answer.

I understand the recommended way to programmatically access the meta of a Field is by using the composition API.

Still, is there a way to do so using only the components approach ?

Maybe by putting a ref= on the Form or Field component ?

[ghanu119]

@RoundRobin-fr
Hi,
Nope. There is no way as you are looking for it. No ref will work.
But yes, inside component you can also define setup() as I provided the above example.