added inline message options

Author: matt-sanders

src/components/FormlyField.vue

@@ -38,9 +38,19 @@
          if ( !this.field.required && !this.model[ this.field.key ] ) return;
 
          let validator = this.field.validators[validKey];
+         let validatorMessage = false;
 
+         if ( typeof validator === 'object' ){
+           if ( !( 'message' in validator ) ){
+             console.error( "Looks like you've set a validator object without setting a message. If you don't need to explicity set the message just define the validator as either an expression or a function. Refer to the docs for more info");
+           } else {
+             validatorMessage = validator.message;
+             validator = validator.expression;
+           }
+         }
+         
          let valid = typeof validator == 'function' ? !validator(field, model) : !eval(validator);
-         setError(this.form, this.field.key, validKey, valid);
+         setError(this.form, this.field.key, validKey, valid, validatorMessage);
          
        });
      }

src/util.js

@@ -25,7 +25,7 @@ export function getTypes(){
  * @param {String} err
  * @param {Bool} isError
  */
-export function setError(form, key, err, isError){
+export function setError(form, key, err, isError, message = false){
     if ( !form.$errors[key] ) form.$errors[key] = {};
-    form.$errors[key][err] = isError;
+    form.$errors[key][err] = message || isError;
 }

test/unit/specs/FormlyField.spec.js

@@ -284,6 +284,55 @@ describe('FormlyField', () => {
         done();
       },0);
     });
+
+    describe("Validation Messages", (done) => {
+
+      //what do we want to do
+
+      //--- define messages ---
+      //vf.addValidationString('validatorKey', 'message');
+      //vf.addValidationPattern('validatorKey', '%l is required');
+      //vf.addValidationPattern('validatorKey', '%v is too small');
+
+      //add specific messages
+      /*
+       * validators: {
+       *    test: {
+       *      expression: function(){},
+       *      message: '%l requires 10, you entered %s'
+       *    }
+       * }
+       */
+
+      it('Inline messages', () => {
+        let data = {
+          form: {
+            $valid: true,
+            $errors: {}
+          },
+          model: {
+            search: 'testing'
+          },
+          fields: [
+            {
+              key: 'search',
+              type: 'test',
+              validators: {
+                validatorMessage:
+                {
+                  expression: 'model.search == "test"',
+                  message: 'Must equal test'
+                }
+              }
+            }
+          ]
+        };
+
+        createValidField(data);
+        expect(vm.form.$errors.search.validatorMessage).to.equal('Must equal test');
+      });
+      
+    });
 
   });
 

test/unit/specs/index.spec.js

@@ -6,42 +6,45 @@ import Util, {addType, getTypes, setError} from 'src/util';
 
 describe('module', () => {
 
-    it('module props', () => {
-        expect(VueFormly).to.exist;
-        expect(VueFormly.install).to.be.a('function');
-        expect(VueFormly.addType).to.be.a('function');
-        expect(VueFormly.getTypes).to.be.a('function');
-        expect(addType).to.be.a('function');
-        expect(getTypes).to.be.a('function');
-        expect(setError).to.be.a('function');
-        expect(Util.formlyFields).to.be.a('object');
-    });
-
-    it('should add fields to Vue', () => {
-
-        //mock vue
-        window.Vue = {
-            component(){},
-            filter(){}
-        };
-        VueFormly.install(Vue);
-
-        let newField = {
-            foo: 'bar'
-        };
-        addType('test', newField);
-        expect(getTypes().formly_test).to.deep.equal(newField);
-    });
-
-    it('should handle errors',()=>{
-        let form = {
-            $errors: {}
-        };
-        setError(form, 'fname', 'required', true);
-        expect(form.$errors.fname.required).to.be.true;
-
-        setError(form, 'fname', 'required', false);
-        expect(form.$errors.fname.required).to.be.false;
-    });
-    
+  it('module props', () => {
+    expect(VueFormly).to.exist;
+    expect(VueFormly.install).to.be.a('function');
+    expect(VueFormly.addType).to.be.a('function');
+    expect(VueFormly.getTypes).to.be.a('function');
+    expect(addType).to.be.a('function');
+    expect(getTypes).to.be.a('function');
+    expect(setError).to.be.a('function');
+    expect(Util.formlyFields).to.be.a('object');
+  });
+
+  it('should add fields to Vue', () => {
+
+    //mock vue
+    window.Vue = {
+      component(){},
+      filter(){}
+    };
+    VueFormly.install(Vue);
+
+    let newField = {
+      foo: 'bar'
+    };
+    addType('test', newField);
+    expect(getTypes().formly_test).to.deep.equal(newField);
+  });
+
+  it('should handle errors',()=>{
+    let form = {
+      $errors: {}
+    };
+    setError(form, 'fname', 'required', true);
+    expect(form.$errors.fname.required).to.be.true;
+
+    setError(form, 'fname', 'required', false);
+    expect(form.$errors.fname.required).to.be.false;
+
+    setError(form, 'fname', 'required', true, 'Hey there');
+    expect(form.$errors.fname.required).to.equal('Hey there');
+  });
+  
 });