tushargugnani / vue-step-wizard

A simple VueJS Step / Form Wizard plugin with Validation Support.
MIT License
118 stars 29 forks source link

hasError doesn't work with bootstrap-vue #14

Open SlyDave opened 3 years ago

SlyDave commented 3 years ago

Hi,

Thanks for the package, it's the best stepper I've found so far, with the least bugs.

I'm integrating this with bootstrap-vue, it's form elements have a state prop that requires 3 values, true/false and null. As it can show errors and success.

If I just use the value of :state="!hasError('field')" it will mark the input as valid the moment the component is mounted: image

the bootstrap-vue b-form-input component expects "state" to return 3 values via return $v.field.$dirty ? !$v.field.$error : null; true: isValid false: !isValid null: not yet validated

I've solved this by adding my own function

inputState(fieldName) {
    if ((fieldName in this.$v.formData)) {
        return this.$v.formData[fieldName].$dirty ? !this.$v.formData[fieldName].$error : null;

    }
  <b-form-input
          id="input-1"
          v-model.trim="formData.email"
          type="email"
          placeholder="Enter email"
          required
          :state="inputState('email')"
  ></b-form-input>

Might be a handy addition to ValidationHelper to provide support for bootstrap-vue 👍

tushargugnani commented 3 years ago

Thanks, Gary. I will add this method to the ValidationHelper class in the next release.