added required checks

Author: matt-sanders

src/components/FormlyField.vue

@@ -4,14 +4,36 @@
 
 <script>
  const Vue = require('vue');
- import Util, {getTypes} from '../util';
+ import Util, {getTypes, addError, removeError} from '../util';
  export default {
      props: ['form', 'key'],
      computed: {
          type:function(){
              return 'formly_'+this.form[this.key].type;
          }
      },
-     components: getTypes()
+     methods: {
+         validate:function(){
+             let field = this.form[this.key];
+
+             //just return straight away if nothing is there
+             if ( !field.required && !field.value ) return;
+
+             if ( field.required ){
+                 if ( !field.value ){
+                     addError(this.form, this.key, 'required');                     
+                 } else {
+                     removeError(this.form, this.key, 'required');
+                 }
+             }
+         }
+     },
+     components: getTypes(),
+     created(){
+         this.validate();
+         this.$watch('form.'+this.key+'.value', (val) =>{
+             this.validate();
+         });
+     }
   }
 </script>

src/util.js

@@ -17,3 +17,25 @@ export function addType(id, options){
 export function getTypes(){
     return exports.formlyFields;
 }
+
+/**
+ * Allows a field to add errors to the form
+ * @param {Object} form
+ * @param {String} key
+ * @param {String} err
+ */
+export function addError(form, key, err){
+    if ( !form.$errors[key] ) form.$errors[key] = {};
+    form.$errors[key][err] = true;
+}
+
+/**
+ * Allows a field to remove an error from the form
+ * @param {Object} form
+ * @param {String} key
+ * @param {String} err
+ */
+export function removeError(form, key, err){
+    delete form.$errors[key][err];
+    if (Object.keys(form.$errors[key]).length == 0 ) delete form.$errors[key];
+}

test/unit/specs/FormlyField.spec.js

@@ -75,5 +75,57 @@ describe('FormlyField', () => {
         }, 0);
 
     });
+
+    describe('Validation', ()=>{
+
+        before(()=>{
+            Vue.component('formly_test', {
+                props: ['form', 'key'],
+                template: '<div></div>'
+            });
+        });
+
+        function createValidField(data){
+            return createForm('<formly-field :form.sync="form" key="search"></formly-field>', data);
+        };
+
+        it('should handle required values', (done) => {
+
+            let data = {
+                form: {
+                    $valid: true,
+                    $errors: {},
+                    search: {
+                        type: 'test',
+                        value: '',
+                        required: true
+                    }
+                }
+            };
+            
+            createValidField(data);
+            expect(vm.form.$errors.search.required).to.be.true;
+
+            vm.$set('form.search.value','testing');
+            setTimeout(()=>{
+                expect(vm.form.$errors.search).to.equal(undefined);
+                done();
+            },0);
+            
+        });
+
+        it('should take an expression', () => {
+            let data = {
+                form: {
+                    $valid: true,
+                    $errors: {},
+                    search: {
+                        
+                    }
+                }
+            };
+        });
+        
+    });
 
 });

test/unit/specs/index.spec.js

@@ -1,7 +1,7 @@
 import {expect} from 'chai';
 
 import VueFormly from 'src/index';
-import Util, {addType, getTypes} from 'src/util';
+import Util, {addType, getTypes, addError, removeError} from 'src/util';
 
 
 describe('module', () => {
@@ -13,6 +13,8 @@ describe('module', () => {
         expect(VueFormly.getTypes).to.be.a('function');
         expect(addType).to.be.a('function');
         expect(getTypes).to.be.a('function');
+        expect(addError).to.be.a('function');
+        expect(removeError).to.be.a('function');
         expect(Util.formlyFields).to.be.a('object');
     });
 
@@ -31,5 +33,16 @@ describe('module', () => {
         addType('test', newField);
         expect(getTypes().formly_test).to.deep.equal(newField);
     });
+
+    it('should handle errors',()=>{
+        let form = {
+            '$errors': {}
+        };
+        addError(form, 'fname', 'required');
+        expect(form.$errors.fname.required).to.be.true;
+
+        removeError(form, 'fname', 'required');
+        expect(typeof form.$errors.fname).to.equal('undefined');
+    });
 
 });