Bootstrap 4 support?

[JasonHenson]

Any plans to support Bootstrap 4 in the very near future?

[dobromir-hristov]

Looking at Bootstrap 4, this is a normal field after validation

<div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
</div>

We can have the invalid-feedback and the label, but we cannot add the is-invalid class to your inputs, as those will be provided via slots. Do you think this would be sufficient?

[JasonHenson]

That should be fine. Thanks for the quick response!

[dobromir-hristov]

 <form-wrapper :validator="$v.form">
    <form-group name="email">
      <template slot-scope="{ validator, hasErrors }">
        <input
          class="form-control"
          :class="{ 'is-invalid': hasErrors, 'is-valid': !hasErrors }"
          type="email"
          name="email"
          @input="validator.$touch()">
      </template>
    </form-group>

    <form-group name="name">
      <template slot-scope="{ validator, hasErrors }">
        <input
          class="form-control"
          :class="{ 'is-invalid': hasErrors, 'is-valid': !hasErrors }"
          type="text"
          name="name"
          @input="validator.$touch()">
      </template>
    </form-group>
  </form-wrapper>

This is an example how you can add is-valid and is-invalid classes to your inputs. Its a bit more boilerplate than I would like to, but its either this, or rendering an input for you (which i will not do).

If you like this, I will push the template tomorrow as its late now.

[dobromir-hristov]

Alright. Managed to remove some boilerplate. I think this looks allot better.

<form-group name="first_name">
     <template slot-scope="{ attributes, events }">
          <input
            v-bind="attributes"
            v-on="events"
            type="text"
            v-model="nestedObject.first_name">
     </template>
</form-group>

[JasonHenson]

The last example looks much cleaner for sure. I wouldn't want to have the input rendered anyways as I use bootstrap-vue component. I really appreciate you working on this so fast.

[dobromir-hristov]

Template is done. Updated the rest of the templates to have bindingProps and bindingActions.

Also added some new features as well. Will release later today v2.1

[dobromir-hristov]

@JasonHenson try now :)

[JasonHenson]

thank you it is adding support so fast -- it is adding the correct classes now!

Unrelated question, do you have any plans to support Bootstrap-vue? I have to use a non-component form-group, etc. to get validation to function correctly.

https://bootstrap-vue.js.org/

[dobromir-hristov]

Hey @JasonHenson I looked at bootstrap-vue and you can totally use their formgroup. Just wrap it with your component that renders the form-group and passes the invalid-state to it. Something like this:

<template>
  <b-form-group
    :invalid-feedback="firstErrorMessage"
    :state="isValid"
  >
    <slot
      :state="isValid"
    />
  </b-form-group>
</template>
<script>
import { singleErrorExtractorMixin } from 'vuelidate-error-extractor'

export default {
  name: 'FormElement',
  extends: singleErrorExtractorMixin
}
</script>

Then you can use it like so:

  <form-element :validator="$v.form.input">
    <template slot-scope="{ state }">
      <b-form-input id="input1" :state="state" v-model.trim="name"/>
    </template>
  </form-element>

[dobromir-hristov]

I wrote this without testing at all, but I think it should work :)

[paolog22]

@dobromir-hristov is the component auto register or still need to register ? thanks

and i cant get it work with the code above.. thanks

[dobromir-hristov]

If you pass it to template property it will get registered, but you can do it manually it doesn't matter

[paolog22]

thanks very fast response <3 . one more thing base on the code above .. state is false but the input is red.. i dont know why..

[dobromir-hristov]

if state is false, it will be red. That would mean the isValid property in the error extractor is returning false.

[paolog22]

ow my bad.. sorry .. thanks :) hope to see more supported framework like bootstrap-vue :)

[dobromir-hristov]

Well I have tried with Quasar and Bulma and it works perfectly. Maybe I should make a page on how to use them...

[paolog22]

@dobromir-hristov please do :) that would be very helpful

[paolog22]

please when you do the page please make initial state to null :) if possible thanks

[dobromir-hristov]

Is it always green atm ?

[paolog22]

always red ..

[dobromir-hristov]

<template>
  <b-form-group
    :invalid-feedback="firstErrorMessage"
    :state="formGroupState"
  >
    <slot
      :state="formGroupState"
    />
  </b-form-group>
</template>
<script>
import { singleErrorExtractorMixin } from 'vuelidate-error-extractor'

export default {
  name: 'FormElement',
  extends: singleErrorExtractorMixin,
 computed: {
     formGroupState () {
       return this.preferredValidator.$dirty ? this.isValid : null
     }
  }
}
</script>

[paolog22]

that is working.. thank you :)

[dobromir-hristov]

Will update it with next release.

[JasonHenson]

Hey, sorry for the delay -- I was able to get your example working. Thank you!

[paolog22]

please include vuetify too when you have time thanks :)

[dobromir-hristov]

@paolog22 done. https://dobromir-hristov.github.io/vuelidate-error-extractor/other_frameworks.html#usage-with-vuetify

[paolog22]

Wow.. thank you. I got it working with vuetify from your previous example, but i think this is better :) thank you

[dobromir-hristov]

Example is added to the docs now. https://dobromir-hristov.github.io/vuelidate-error-extractor/other_frameworks.html#usage-with-bootstrapvue