Tuesday, 18 June 2019

V-validate on dynamic custom component

I am using Vee-validate (https://baianat.github.io/vee-validate/) to validate all my forms. Now I would like to do the following:

In my form the "value" field is a dynamic component, depending on the type of the current object. Type can be integer, string, decimal etc.

So if the type changes, the input changes, too.

This is how I did this:

   <component
                                            :name="'attribute-value'"
                                            v-model="attribute.value"
                                            :is="attribute.type">
                                    </component>

And

import string from '@/components/fields/String'
import integer from '@/components/fields/Integer'
import decimal from '@/components/fields/Decimal'

export default {
        name: 'edit',
        metaInfo: {
        title: 'Edit'
        },
        components: {
            string, integer, decimal
        },
}

Alright - each field should have it's own validation. The integer-field should only allow numbers. So I would like to do this:

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

    $_veeValidate: {
        name() {
            return this.name;
        },
        value() {
            return this.value;
        }
    },
}
</script>

Unfortunately, there are no errors shown, if I enter something else than a number. And: The submit-method on the parent component does not prevent the submission.

I am thankful for all of your comments :-)



from V-validate on dynamic custom component

No comments:

Post a Comment