added error class for bootstrap 4

Author: matt-sanders

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-formly-bootstrap",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "A bootstrap based form input bundle for Vue Formly",
   "main": "dist/vue-formly-bootstrap.js",
   "scripts": {

src/fields/fieldInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="form-group formly-input" :class="[ to.inputType, {'formly-has-value': model[field.key], 'formly-has-focus': form[field.key].$active, 'has-error': hasError}]">
+  <div class="form-group formly-input" :class="[ to.inputType, {'formly-has-value': model[field.key], 'formly-has-focus': form[field.key].$active, 'has-error has-danger': hasError}]">
     <label v-if="to.label" :for="to.id ? to.id : null">{{to.label}}</label>
     <input class="form-control" :class="to.classes" :id="to.id ? to.id : null" type="text"  v-model="model[field.key]" @blur="onBlur" @focus="onFocus" @click="onClick" @change="onChange" @keyup="onKeyup" @keydown="onKeydown" v-formly-atts="to.atts" v-formly-input-type="to.inputType">
     <error-display :form="form" :field="field.key"></error-display>

src/fields/fieldList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="checkbox formly-list" :id="to.id" :class="[to.classes, {'has-error': hasError}]">
+  <div class="checkbox formly-list" :id="to.id" :class="[to.classes, {'has-error has-danger': hasError}]">
 
     <label v-for="option in field.options">
       <input v-if="!to.inputType || to.inputType == 'checkbox'" type="checkbox" v-model="model[field.key]" :value="option.value || option" @blur="onBlur" @focus="onFocus" @click="onClick" @change="onChange" @keyup="onKeyup" @keydown="onKeydown" v-formly-atts="to.atts">

src/fields/fieldSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="form-group formly-select" :class="{'has-error': hasError}">
+  <div class="form-group formly-select" :class="{'has-error has-danger': hasError}">
     <label v-if="to.label" :for="to.id ? to.id : null">{{to.label}}</label>
     <select class="form-control" :class="to.classes" :id="to.id ? to.id : null" v-model="model[field.key]" @blur="onBlur" @focus="onFocus" @click="onClick" @change="onChange" @keyup="onKeyup" @keydown="onKeydown" v-formly-atts="to.atts">
       <option v-for="option in field.options" :value="option.value || option">{{option.label || option}}</option>

src/fields/fieldTextarea.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="form-group formly-textarea" :class="{'formly-has-value': model[field.key], 'formly-has-focus': form[field.key].$active, 'has-error': hasError}">
+  <div class="form-group formly-textarea" :class="{'formly-has-value': model[field.key], 'formly-has-focus': form[field.key].$active, 'has-error has-danger': hasError}">
     <label v-if="to.label" :for="to.id ? to.id : null">{{to.label}}</label>
     <textarea class="form-control" :class="to.classes" :id="to.id ? to.id : null" v-model="model[field.key]" @blur="onBlur" @focus="onFocus" @click="onClick" @change="onChange" @keyup="onKeyup" @keydown="onKeydown" v-formly-atts="to.atts"></textarea>
     <error-display :form="form" :field="field.key"></error-display>

test/unit/specs/index.spec.js

@@ -195,6 +195,7 @@ describe('Bootstrap Field Inputs', () => {
       setTimeout( () => {
         expect(data.form['test'].$hasError).to.be.true;
         expect(vm.$el.querySelectorAll('.has-error')).to.be.length(1);
+	expect(vm.$el.querySelectorAll('.has-danger')).to.be.length(1);
         done();
       }, 0);
     });