Merge pull request #4 from formly-js/error-handling

Implements enhanced error handling and the display of error messages.

Author: matt-sanders

package.json

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

src/components/errorDisplay.vue

@@ -0,0 +1,23 @@
+<template>
+  <span v-if="message" class="help-block">{{message}}</span>
+</template>
+
+<script>
+ export default {
+   props: ['field', 'form'],
+   computed: {
+     message(){
+       let message = false;
+       if ( !( this.field in this.form.$errors ) || this.form[ this.field ].$active || !this.form[this.field].$dirty ) return message;
+       let errors = this.form.$errors[ this.field ];
+       Object.keys( errors ).some( errorKey => {
+         if ( typeof errors[ errorKey ] != 'boolean' ){
+           message = errors[ errorKey ];
+           return true;
+         }
+       });
+       return message;
+     }
+   }
+ }
+</script>

src/fields/baseField.js

@@ -1,3 +1,4 @@
+import errorDisplay from '../components/errorDisplay.vue';
 export default
 {
   props: [
@@ -9,7 +10,8 @@ export default
   created: function(){
     let state = {
       '$dirty': false,
-      '$active': false
+      '$active': false,
+      '$hasError': false
     };
     this.$set(this.form, this.field.key, state);
   },
@@ -39,5 +41,22 @@ export default
     onKeydown: function(e){
       this.runFunction('onKeydown', e);
     }        
+  },
+  computed: {
+    hasError: function(){
+      if ( this.form[ this.field.key ].$dirty == false || this.form[ this.field.key ].$active == true ) {
+        return false;
+      }
+      let errors = this.form.$errors[ this.field.key ];
+      let hasErrors = false;
+      Object.keys( errors ).forEach( err => {
+        if ( errors[err] !== false ) hasErrors = true; 
+      });
+      this.$set(this.form[ this.field.key ], '$hasError', hasErrors);
+      return hasErrors;
+    }
+  },
+  components: {
+    'error-display': errorDisplay
   }
 };

src/fields/fieldInput.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="form-group formly-input" :class="[ to.inputType, {'formly-has-value': model[field.key], 'formly-has-focus': form[field.key].$active}]">
+  <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}]">
     <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>
   </div>
 </template>
 

src/fields/fieldList.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="checkbox formly-list" :id="to.id" :class="to.classes">
+  <div class="checkbox formly-list" :id="to.id" :class="[to.classes, {'has-error': 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">
       <input v-if="to.inputType == 'radio'" type="radio" 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">
       {{option.label || option}}
     </label>
-    
+    <error-display :form="form" :field="field.key"></error-display>
   </div>
 </template>
 

src/fields/fieldSelect.vue

@@ -1,9 +1,10 @@
 <template>
-  <div class="form-group formly-select">
+  <div class="form-group formly-select" :class="{'has-error': 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>
     </select>
+    <error-display :form="form" :field="field.key"></error-display>
   </div>
 </template>
 

src/fields/fieldTextarea.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="form-group formly-textarea">
+  <div class="form-group formly-textarea" :class="{'formly-has-value': model[field.key], 'formly-has-focus': form[field.key].$active, 'has-error': 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>
   </div>
 </template>
 

test/unit/specs/ErrorDisplay.spec.js

@@ -0,0 +1,77 @@
+import chai from 'chai';
+import {expect} from 'chai';
+import sinonChai from 'sinon-chai';
+import sinon from 'sinon';
+import Vue from 'vue';
+import errorDisplay from 'src/components/errorDisplay.vue';
+
+let el, vm, data;
+
+function createVue(){
+  el = document.createElement('div');
+  vm = new Vue({
+    data: data,
+    template: '<error-display :field="key" :form="form"></error-display>',
+    components: {
+      'error-display': errorDisplay
+    }
+  }).$mount(el);
+
+  return [el, vm];
+}
+
+describe("errorDisplay.vue", () => {
+  it("should display errors", () => {
+    data = {
+      form: {
+        '$errors': {
+          test: {
+            foo: 'This is a test'
+          }
+        }
+      },
+      key: 'test'
+    };
+
+    createVue();
+    expect(vm.$el.textContent).to.equal( data.form.$errors.test.foo );
+  });
+
+  it('should only display the first error', () => {
+
+    data = {
+      form: {
+        '$errors': {
+          test: {
+            foo: false,
+            bar: 'This is a test',
+            foobar: 'testing'
+          }
+        }
+      },
+      key: 'test'
+    };
+
+    createVue();
+    expect(vm.$el.textContent).to.equal( data.form.$errors.test.bar );
+    
+  });
+
+  it('should show nothing at all without errors', () => {
+
+    data = {
+      form: {
+        '$errors': {
+          test: {
+            foo: false
+          }
+        }
+      },
+      key: 'test'
+    };
+
+    createVue();
+    expect(vm.$el.textContent).to.equal( '' );
+    
+  });
+});

test/unit/specs/index.spec.js

@@ -177,6 +177,29 @@ describe('Bootstrap Field Inputs', () => {
     };
   });
 
+  describe('Errors', () => {
+    it('should receive an error state', (done) => {
+      data.fields[0].type = 'input';
+      data.fields[0].required = true;
+      createForm();
+
+      expect(data.form['test'].$hasError).to.be.false;
+      trigger(vm.$el.querySelectorAll('input')[0], 'focus');
+      expect(data.form['test'].$hasError).to.be.false;
+      expect(data.form['test'].$active).to.be.true;
+      
+      trigger(vm.$el.querySelectorAll('input')[0], 'change');
+      trigger(vm.$el.querySelectorAll('input')[0], 'blur');
+      expect(data.form['test'].$dirty).to.be.true;
+      expect(data.form['test'].$active).to.be.false;
+      setTimeout( () => {
+        expect(data.form['test'].$hasError).to.be.true;
+        expect(vm.$el.querySelectorAll('.has-error')).to.be.length(1);
+        done();
+      }, 0);
+    });
+  });
+
   describe('Input', () => {
 
     describe('functions',() =>{
@@ -445,6 +468,28 @@ describe('Bootstrap Field Inputs', () => {
         done();
       }, 0);            
     });
+
+    it('only shows a checkbox', () => {
+      data.fields[0].type = 'list';
+      data.fields[0].options = ['one', 'two'];
+      createForm();
+      let inputs = vm.$el.querySelectorAll('input');
+      expect(inputs).to.be.length(2);
+      expect(inputs[0].type).to.equal('checkbox');
+      expect(inputs[1].type).to.equal('checkbox');
+    });
+    
+    it('only shows a radio box', () => {
+      data.fields[0].type = 'list';
+      data.fields[0].templateOptions.inputType = 'radio';
+      data.fields[0].options = ['one', 'two'];
+      createForm();
+      let inputs = vm.$el.querySelectorAll('input');
+      expect(inputs).to.be.length(2);
+      expect(inputs[0].type).to.equal('radio');
+      expect(inputs[1].type).to.equal('radio');
+    });
+    
   });
 
 });