vee-validate scoping for components not working with bootstrap-vue

[jonaswikstrom]

Versions

• vee-validate: 2.1.7
• vue: 2.5.22

Describe the bug
Using vee-validate on an application together with bootstrap-vue. Yes, fieldsBagName is changed using:

Vue.use(VeeValidate, { inject: true, fieldsBagName: 'veeFields' });

Having a b-tabs with a component inside each b-tab. Each tab has forms with a common scope. The validation works great inside the component itself but outside using e.g. errors.any('salary'), there is no reaction. If i log errors i can see salary in the result:

{ "vmId": 346, "items": [ { "id": "61", "vmId": 381, "field": "salary.baseSalary_0", "msg": "The salary.baseSalary_0 field is required.", "rule": "required", "scope": "salary" }, { "id": "62", "vmId": 381, "field": "salary.taxTable_0", "msg": "The salary.taxTable_0 field is required.", "rule": "required", "scope": "salary" } ] } Why is this?

using validator.validate() does not trigger the validation inside each component either.

[logaretm]

Scopes are used to group fields within the same component, however, for cross-component validation, they need to have the same $validator instance, which can be done by letting them inherit it from their parent component using inject: ['$validator']

You can read more about that in the docs

[jonaswikstrom]

Yes sure, forgot to mention that I of course already did have this on each komponent. :-|

[logaretm]

Oh, could you provide a sample to reproduce this? codesandbox would be perfect.

[jonaswikstrom]

Ouch that was an invalid link there https://codesandbox.io/s/z2lrpy81wx should hopefully do it!

[logaretm]

Sorry for being late to respond, the problem is when using a component based UI library, that the $validator injection will not work properly because the entire component tree can provide their own validator instances. there is a way to resolve that:

• Disable automatic injection using { inject: false } when configuring vee-validate.
• Add $_veeValidate config object on the component that will serve as the validation context (or root form), with a validator prop set to 'new'.

  $_veeValidate: {
    validator: "new"
  },

What all of this does, is that it makes the validation context component is the only validator instance provider, forcing the children to only inject from it.

Here is an updated example

This is documented in the same link I provided.

In v3 I will make this much simpler to do.

[jonaswikstrom]

@logaretm ! Amazing! Sorry acting support for me, it now works like charm! Keep up the good work!!!

[rajesh1211]

Thanks @logaretm
For this, there was a reason we were using vee-validate 2.0 is this was causing issue with bootstrap vue.