how to validate all refs with vee-validate?

Question

I have dynamic components that needs to be validated.

I have an array and i push my components there. The for loop works great.

    validateForm() {
      const PROMISES = [this.$refs.contactDetailsForm.$refs.contactDetails]
      for (let i = 1; i <= this.count; i++) {
        PROMISES.push(this.$refs[`passengerForm${i}`][0])
      }


      return Promise.all(PROMISES)
    },

But problem is I do not know how to return the results of the validation. I want the results of this function in another function(Promise). how can I do that?

Answer 1

this is the solution:

    validateForm() {
      const PROMISES = [this.$refs.contactDetailsForm.$refs.contactDetails]
      for (let i = 1; i <= this.count; i++) {
        PROMISES.push(this.$refs[`passengerForm${i}`][0])
      }

      return new Promise((resolve, reject) => {
        PROMISES.forEach(async (item) => {
          const STATUS = await item.validate()
          STATUS ? resolve(STATUS) : reject(STATUS)
        })
      })
    }

Answer 2

Untested, but Promise.all returns an array of results for the promises. What you need to do is trigger validate for all the things you want to know the result for, collect those promises and then check the results in a Promise.all. You didn't give quite enough code to answer this fully but it's something like this:

validateForm() {
  //both of these I added validate() to because I'm hoping they are references to ValidationObservers
  const PROMISES = [this.$refs.contactDetailsForm.$refs.contactDetails.validate()]
  for (let i = 1; i <= this.count; i++) {
    PROMISES.push(this.$refs[`passengerForm${i}`][0].validate())
  }

  return Promise.all(Promises);
}

Then wherever you are calling this, you'd do:

this.validateForm().then((values) => {
    this.formIsValid = values.every((result) => result));
    //if the things above are ValidationProviders rather than VO, you have to use result.valid instead of result
});