Vee Validate - Child Component Example

bus.js

import Vue from 'vue';

const bus = new Vue();

export default bus;

ChildComponent.vue

<template>
  <div>
    <input v-validate data-rules="required" :class="{'has-error': errors.has("textInput")}" id="textInput" name="textInput" type="text">
    <span class="error" v-show="errors.has("textInput")">{{ errors.first("textInput") }}</span>
  </div>
</template>

<script>
  import { find, propEq } from 'ramda'
  import bus from './bus'

  export default {
    mounted() {
      //Listen on the bus for the parent component running validation
      bus.$on('validate', this.onValidate)
      //Watch for the changes to the childs error bag and pass back to the parent
      this.$watch(() => this.errors.errors, (newValue, oldValue) => {
        const newErrors = newValue.filter(error =>
          find(propEq('field', error.field))(oldValue) === undefined
        )
        const oldErrors = oldValue.filter(error =>
          find(propEq('field', error.field))(newValue) === undefined
        )
        bus.$emit('errors-changed', newErrors, oldErrors)
      })
    },
    methods: {
      onValidate() {
        this.$validator.validateAll();
        if (this.errors.any()) {
          bus.$emit('errors-changed', this.errors.errors)
        }
      },
    },
    beforeDestroy() {
      //When destroying the element remove the listeners on the bus.
      //Useful for dynaically adding and removing child components
      bus.$emit('errors-changed', [], this.errors.errors)
      bus.$off('validate', this.onValidate)
    },
  }
 </script>

ParentComponent.vue

<template>
  <div>
    <child-component></child-component>
    
    <button :disabled="errors.any()" :click="submit()"></button>
  </div>
</template>

<script>
  import bus from './bus'
  import ChildComponent from './ChildComponent'

  export default {
    mounted() {
      //Emit that validation is required on the bus
      this.$on('veeValidate', () => {
        bus.$emit('validate');
      })
      //Listen on the bus for changers to the child components error bag and merge in/remove errors
      bus.$on('errors-changed', (newErrors, oldErrors) => {
        newErrors.forEach(error => {
          if (!this.errors.has(error.field)) {
            this.errors.add(error.field, error.msg)
          }
        })
        if (oldErrors) {
          oldErrors.forEach(error => {
            this.errors.remove(error.field)
          })
        }
      })
    },
    methods: {
      submit() {
        //On button pressed run validation
        this.$validator.validateAll()
        if (!this.errors.any()) {
          //Do Sumbit
        }
      }
    }
    components: {
      ChildComponent,
    },
  };
</script>

@sproogen mate, the line here https://gist.github.com/sproogen/147d75db261505e8a558a7fd11a20551#file-parentcomponent-vue-L16 is a bit misleading because at https://gist.github.com/sproogen/147d75db261505e8a558a7fd11a20551#file-parentcomponent-vue-L36 you're using this.$validator. Can you update the gist to be a bit more clear, please ?

Is there any way to make the errors object global? Would make things easier.

I can't get this working... validateAll() is a promise, so I don't really see how this should work

@sproogen I believe I found a simpler way to address this situation, see logaretm/vee-validate#468 (comment)

At the moment, this requires a bit of hacking with the internals of vee-validate to remove the beforeCreate() and mounted() hooks, but maybe this pattern can find its way into the library...

I tried for 6 hours to get this working with my app (as I have deeply nested components). Eventually, I just used this Advanced -
Inject and had it solved in 3 minutes flat. If you can't get the above to work, try the injection route!

@stephenmac that's perfect, thanks! One line in child component solves everything (I have a form with several sub-form components).

inject: ['$validator']

@lattam this not worked for me... any idea?

Simply adding that single line @lattam talks about didn't work for me either. I also had to do Vue.use(VeeValidate, { inject: false }); and manually set the validator on the parent element with: $validates: true,

I add inject: ['$validator'] in child component but show a warning Injection "__ob__" not found

vee-validate@2.0.0-rc.14:
this.errors.errors should be this.errors.items

I get Injection "__ob__" not found too, the same as @woodyalan.

@lattam this works perfectly!

You can use the instance of the parent validator in the child component (this.$validator = this.$parent.$validator in child component created hook) to validate all of the child components from the parent instance.

If someone stumbles on this gist in the future, you can also use Vue’s provide/inject API to request the parent’s validator instance.

Taking the multiple clues from the last 10 messages here, the way I got this to work was:

Parent Component:

...
provide () {
    return { parentValidator: this.$validator }
  },
...

Child Component:

...
inject: [ 'parentValidator' ],
...
 created () {
    this.$validator = this.parentValidator
  }
...

@garymcm That worked perfectly — thank you! :)

@garymcm thank you .

As @Banandrew wrote, you can use inject API. The link was updated so here is an updated link -> https://baianat.github.io/vee-validate/concepts/injections.html#injecting-parent-validator

@garymcm thanks

@garymcm this worked perfectly, many thanks!

@garymcm thank you!

@garymcm Thx man, was struggling for hours with this

Thanks @garymcm. Your 7 lines of example code were much more helpful than the documentation at https://baianat.github.io/vee-validate/concepts/injections.html#injecting-parent-validator

Thanks @garymcm. Your 7 lines of example code were much more helpful than the documentation at https://baianat.github.io/vee-validate/concepts/injections.html#injecting-parent-validator

You're DM Right!
Thanks @garymcm

@garymcm WOW... amazing

@garymcm Thanks !!

@garymcm That works perfectly. Thank you

@garymcm thank you :)

created () {
this.$validator = this.parentValidator
}

It works, Thanks.

@garymcm thank you, it worked perfectly