Vee-validate: errors.clear doesnt remove invalid class with enableAutoClasses setting

[codaha]

When i set enableAutoClasses to true and later run this.errors.clear, errors indeed get removed from their array , but invalid class doesnt get removed from input dom elements,

[logaretm]

Error Bag does not control the classes behavior, try to set the flags instead:

this.$validator.flag('myField', {
  invalid: false
});

[repetier]

Not very satisfying if you have many forms with many fields. Therefor I extended vee-validate with a reset function:

VeeValidate.Validator.prototype.reset = function (scope) {
  // Reset everything
  if (scope === true) {
    for (let i in this.$scopes) {
      if (this.$scopes.hasOwnProperty(i)) {
        this.reset(i)
      }
    }
    this.reset()
    return
  }
  if (scope) {
    this.errorBag.clear(scope)
    for (let i in this.fieldBag['$' + scope]) {
      if (this.fieldBag['$' + scope].hasOwnProperty(i)) {
        this.flag(scope + '.' + i, {
          invalid: false,
          valid: false,
          touched: false,
          pristine: true,
          untouched: true,
          pending: false
        })
      }
    }
  } else {
    this.errorBag.clear()
    for (let i in this.fieldBag) {
      if (this.fieldBag.hasOwnProperty(i)) {
        this.flag(i, {
          invalid: false,
          valid: false,
          touched: false,
          pristine: true,
          untouched: true,
          pending: false
        })
      }
    }
  }
}

const validateConfig = {
  errorBagName: 'errors', // change if property conflicts.
  fieldsBagName: 'fields',
  delay: 0,
  locale: 'en',
  dictionary: null,
  strict: true,
  enableAutoClasses: true,
  classNames: {
    touched: 'touched', // the control has been blurred
    untouched: 'untouched', // the control hasn't been blurred
    valid: 'is-success', // model is valid
    invalid: 'is-danger', // model is invalid
    pristine: 'pristine', // control has not been interacted with
    dirty: 'dirty' // control has been interacted with
  },
  events: 'input|blur',
  inject: false
}

now if you assign new data to a form and want all fields to reset call one of these:

// Reset all managed fields
this.$validator.reset(true)
// Reset all unscoped fields
this.$validator.reset()
// Reset fields in scope f1
this.$validator.reset('f1')

This also resets the errorBag for the part, so now you have a 1 liner to do all the dirty work.

[logaretm]

@repetier Great work, can you consider submitting a PR for it?

[repetier]

Sorry I have no time for a PR but feel free to reuse the code as you like.

[logaretm]

29b2877776ea7a7493be670f9dea7c98d31d3550