How to validate child components using Veevalidate in Vuejs?

Asked

Viewed 284 times

1

Personal I saw myself in the following situation, I have a parent component that calls Account and it encompasses various components like Accountaddress, Accountphone, etc... Each of these components has some inputs that need validation, I have already checked the documentation of Veevalidate, what got closer was the Validationprovider, but I could not apply in my case, follow the code I am working, this is the Account:

<template>
    <div>
        <!-- DADOS PESSOAIS -->
        <vx-card
                title="Dados pessoais">
            <div class="vx-row mb-6">
                <div class="vx-col sm:w-1/2 w-full mb-2">
                    <vs-select v-validate="'required'"
                               label="Tipo pessoa"
                               name="account[type]"
                               v-model="account.type">
                        <vs-select-item :key="index"
                                        :value="item.id"
                                        :text="item.name"
                                        v-for="(item,index) in accountType"/>
                    </vs-select>
                </div>
                <div class="vx-col sm:w-1/2 w-full mb-2">
                    <vs-input class="w-full"
                              v-validate="'required'"
                              placeholder="ex.: João Silva"
                              name="account[name_company]"
                              v-model="account.name_company"
                              :label="getLabel('name_company')"/>
                </div>
            </div>

            <div class="vx-row mb-6">
                <div class="vx-col sm:w-1/2 w-full mb-2">
                    <vs-input class="w-full"
                              icon-pack="feather"
                              icon="icon-mail"
                              icon-no-border
                              placeholder="ex.: 000.000.000-00"
                              name="account[cpf_cnpj]"
                              v-mask="getMask('cpf_cnpj')"
                              v-model="account.cpf_cnpj"
                              :label="getLabel('cpf_cnpj')"/>
                </div>
                <div class="vx-col sm:w-1/2 w-full mb-2">
                    <vs-input class="w-full"
                              icon-pack="feather"
                              icon="icon-mail"
                              icon-no-border
                              placeholder="ex.: 00.000.000-0"
                              name="account[rg_ie]"
                              v-model="account.rg_ie"
                              :label="getLabel('rg_ie')"/>
                </div>
            </div>
        </vx-card>

        <template v-if="account.type == 'Jurídica'">
            <vs-divider/>
            <account-responsible></account-responsible>
        </template>

        <template>
            <vs-divider/>
            <account-address></account-address>
        </template>

        <template v-if="account.type == 'Física'">
            <vs-divider/>
            <account-phone></account-phone>
        </template>

        <template v-if="account.type == 'Física'">
            <vs-divider/>
            <account-email></account-email>
        </template>

        <vs-button @click="submitForm" type="gradient" class="w-full mt-6" color="#7367F0" gradient-color-secondary="#CE9FFC">Salvar</vs-button>
    </div>
</template>

When I give Submit, only inputs in the parent component are validated, even inputs in the child components having specified rules.

Solved by injecting the validate dependency, I responded with the solution.

vue.js

  • Hi, would you be able to post the child component code? I would create validation on the child component that returns to the parent if its data is validated

  • So, validation logic ta on each component, I will edit the post and put, but my question is how I would ask the component if everything is ok

  • "my doubt is how I would ask the component if everything is ok"... seems to me a job for events.. you could issue an event telling about the validity of the field.

  • Guys, thanks for the help, I decided by injecting the same dependency, the problem was that I was overwriting the instance in another component and then he could not receive the event to validate. As for the @fernandosavio suggestion, it’s not a bad option, but as the application is great I think it would be kind of hard to keep.

  • William, you’d better create an answer with your solution and accept it. See at I can answer my own question?

1 answer

0


Follows the solution:

  • I disabled the automatic Vee-validate injection:
import VeeValidate from 'vee-validate'
Vue.use(VeeValidate, {inject: false})
  • I injected the instance into the components I have an interest in validating:
export default {
    inject: ['$validator'],
}

Another remark, I was having trouble showing errors in the components that were within a scope, needed to specify in the bag of errors:

<span class="text-danger">{{ errors.first('nome_campo', 'escopo') }}</span>

In short, in addition to saving memory by disabling automatic Vee-validate injection, you can reuse the bag of errors and validate all components on your screen :)

Browser other questions tagged vue.js

You are not signed in. Login or sign up in order to post.