Vee-validate: Validate child components

[ahoiroman]

Versions

• vee-validate: 2.2.10
• vue: 2.6.10

Describe the bug
If I add a component to my form, which has an input that should be required, the validation result is always true.

To reproduce

This is from the parent component:

 <component
    :name="'field-value'"
    v-model="newField.value"
    :is="newField.value">
</component>

This is the child component:

<template>
        <b-input
                :id="'form-'+name"
                :name="'form-'+name"
                type="number"
                v-validate="'required|numeric'"
                :state="errors.has('form-modal.form-'+name) ? 'invalid' : ''"
                :value="value"
                v-on:input="$emit('input',$event)"/>
</template>
<script>
export default {
    name: 'Integer',
    inject: ['$validator'],
    props: ['name', 'value'],
}
</script>

This is the parent validation:

this.$validator.validateAll ('form-modal').then ((result) => {

    if (result) {
        //do stuff
        this.$validator.reset ();
        this.$refs.modal.hide ();
    }
});

Expected behavior
If the field is empty, no error is being shown. All other validations in the modal are working fine.

[ahoiroman]

Update:

If I use this:

<form v-on:submit.prevent="validateForm('form-modal')" data-vv-scope="form-modal">
   <component
                                            :name="'field-value'"
                                            v-model="newField.value"
                                            :is="newField.type">
                                    </component>
                                    <pre>{{ errors.items.map(e => e.msg) }}</pre>
</form>

and

<template>
    <!--<b-input
            :id="'form-'+name"
            :name="'form-'+name"
            :value="value"
            type="number"
            v-validate="'required|email'"
            :state="errors.has('form-modal.form-'+name) ? 'invalid' : ''"
            v-on:input="$emit('input',$event)"/>-->

    <input :id="'form-'+name" :name="'form-'+name" class="form-control"
           type="number" v-validate="'required|numeric'"
           :class="errors.has('form-modal.form-'+name) ? 'is-invalid' : ''"
           v-on:input="$emit('input',$event.target.value)" :value="value" />
</template>
<script>
export default {
    name: 'Integer',
    inject: ['$validator'],
    props: ['name', 'value'],
}
</script>

the validation works. So maybe there's a problem with bootstrap-vue here?

But the validation-check still does not include the error:

this.$validator.validateAll ('form-modal').then ((result) => {

    if (result) {
        //do stuff
        this.$validator.reset ();
        this.$refs.modal.hide ();
    }
});

If I validate forms right within the scoped form like this:

<form v-on:submit.prevent="validateForm('form-modal')" data-vv-scope="form-modal">
    <b-form-row>
        <b-form-group label="Value" class="col">
            <component
                    :name="'field-value'"
                    v-model="newField.value"
                    :is="newField.type">
            </component>
            <pre>{{ errors.items.map(e => e.msg) }}</pre>
        </b-form-group>
        <b-form-group label="Unit" class="col" v-if="newField.type !== 'boolean'">
            <b-input id="new-field-unit"
                     name="new-field-unit"
                     v-validate="{ required: true }"
                     :state="errors.has('form-modal.new-field-unit') ? 'invalid' : ''"
                     v-model="newField.unit"></b-input>
        </b-form-group>
    </b-form-row>
</form>

this.$validator.validateAll ('form-modal') returns false, as it is supposed to do.

[logaretm]

May I suggest you take a look at Validation components. I think you will find it much easier to handle than the directive since there is a lot that can go wrong.

The problem is the directive is flimsy due to a lot of limitations. This is why in v3 it will be deprecated and the library will only offer The ValidationProvider and ValidationObserver as the primary means to validate fields.

[pwgardipee]

@logaretm How can I use ValidationProvider and ValidationObserver to do the validation on a child from the parent? I have recently migrated to v3.

[Loremaster]

@logaretm I have the same question. What is a right way now to validate children component in the version 3? Can you please give some hints/examples?

[Loremaster]

@pwgardipee did you find a solution?