Vee-validate: To detect the errors of all the child components before Saving.

[coderabsolute]

Versions:

• VueJs: 2.4.2
• Vee-Validate: 2.0.0-rc.8

Description:

This is more of a question. I'm curious to know the code am using everywhere can be better to handle things. I want to validate the child components before I send the Save request, here is the little code snippet.

Steps To Reproduce:

validateBeforeSave: function (saveAndNext) {
      let promises = []

      for (let child in this.$refs) {
        promises.push(this.$refs[child].$validator.validateAll())
      }

      Promise.all(promises)
      .then(this.$validator.validateAll())
      .then((error) => {
        const isValid = error[0]

        if (isValid) { this.onSave(saveAndNext) }
      })
    }

onSave: function (saveAndNext) {
// Do the actual saving...
}

[logaretm]

You should use the inject feature in that case, as it allows the child components to use the parent's validator. meaning all errors will be in one place.

http://vee-validate.logaretm.com/advanced#injection

[coderabsolute]

The documentation is good but it is possible to get a full working example?

[logaretm]

Sure, here you go:

https://jsfiddle.net/logaretm/zacxggy9/

As you can see, three inputs are injecting the parent's $validator instance and the parent can see all errors of its children.

The docs are very lacking at the moment, very sorry about that. It is being redesigned at the moment and It will be updated soon.

[maksnester]

@logaretm I didn't catch one moment from fiddle and docs. I should use inject on child, but should I use provide on parent? How does it work? What if I want more nested tree? E.g. parent -> child -> child_of_first_child?

[logaretm]

Provide is automatically added for all components that have a validator instance. This works in most cases unless you want a child to receive the parent's parent validator but the parent has a different validator. Which is very weird in my opinion. You could override the provide in ctor options and replace it with your own implementation.

This is not mentioned in docs because it is not meant for manipulation.