added global validation messages

Author: matt-sanders

src/components/FormlyField.vue

@@ -4,7 +4,7 @@
 
 <script>
  const Vue = require('vue');
- import Util, {getTypes, setError} from '../util';
+ import Util, {getTypes, setError, parseValidationString} from '../util';
  export default {
    props: ['form', 'model', 'field', 'to'],
    computed: {
@@ -49,6 +49,9 @@
            }
          }
          
+         let label = ( 'templateOptions' in this.field ) && ( 'label' in this.field.templateOptions ) ? this.field.templateOptions.label : '';
+         validatorMessage = parseValidationString( validKey, validatorMessage, label, model[ this.field.key ] );
+         
          let valid = typeof validator == 'function' ? !validator(field, model) : !eval(validator);
          setError(this.form, this.field.key, validKey, valid, validatorMessage);
          

src/index.js

@@ -1,25 +1,26 @@
 import Components from './components/index';
 import Filters from './filters/index';
-import Util,{getTypes, addType} from './util';
+import Util,{getTypes, addType, addValidationMessage} from './util';
 
 
 let Formly = {
-    getTypes,
-    addType,
-    install(Vue, options){
-        
-        //install our components
-        Components(Vue);
-        Filters(Vue);
+  getTypes,
+  addType,
+  addValidationMessage,
+  install(Vue, options){
+    
+    //install our components
+    Components(Vue);
+    Filters(Vue);
 
-        Vue.$formly = {getTypes, addType};
-    }
+    Vue.$formly = {getTypes, addType, addValidationMessage};
+  }
 };
 
 //auto install
 if (typeof window !== 'undefined' && window.Vue) {
-    window.Vue.use(Formly);
-    //expose formly functions if auto installed
-    window.Vue.$formly = {getTypes, addType};
+  window.Vue.use(Formly);
+  //expose formly functions if auto installed
+  window.Vue.$formly = {getTypes, addType, addValidationMessage};
 }
 export default Formly;

src/util.js

@@ -1,5 +1,6 @@
 const exports = {
-    formlyFields: {}
+  formlyFields: {},
+  validationMessages: {}
 };
 export default exports;
 
@@ -11,11 +12,11 @@ export default exports;
  * @param {Object} options
  */
 export function addType(id, options){
-    exports.formlyFields['formly_'+id] = options;
+  exports.formlyFields['formly_'+id] = options;
 }
 
 export function getTypes(){
-    return exports.formlyFields;
+  return exports.formlyFields;
 }
 
 /**
@@ -26,6 +27,36 @@ export function getTypes(){
  * @param {Bool} isError
  */
 export function setError(form, key, err, isError, message = false){
-    if ( !form.$errors[key] ) form.$errors[key] = {};
-    form.$errors[key][err] = message || isError;
+  if ( !form.$errors[key] ) form.$errors[key] = {};
+  form.$errors[key][err] = message || isError;
+}
+
+/**
+ * Adds a validation string to Vue Formly to be used later on by validations
+ * @param {string} key
+ * @param {string} message
+ */
+export function addValidationMessage(key, message){
+  exports.validationMessages[ key ] = message;
+}
+
+/**
+ * Given a message key or message it parses in the label and the value
+ * @param {string/bool} key
+ * @param {string} message
+ * @param {string} label
+ * @param {string} value
+ */
+export function parseValidationString(key, message, label, value){
+
+  // if a key has been passed and there's no validation message and no message has been passed then return
+  if ( key && !(key in exports.validationMessages ) && !message ) return false;
+  
+  // first check if a validation message with this key exists
+  if ( key in exports.validationMessages ){
+    message = exports.validationMessages[key];
+  }
+
+  let output = message.replace(/\%l/g, label).replace(/\%v/g, value);
+  return output;
 }

test/unit/specs/FormlyField.spec.js

@@ -2,6 +2,7 @@ import chai from 'chai';
 const expect = chai.expect;
 import Vue from 'vue';
 import FormlyField from 'src/components/FormlyField.vue';
+import Utils from 'src/util';
 
 let el, vm;
 
@@ -291,8 +292,6 @@ describe('FormlyField', () => {
 
       //--- define messages ---
       //vf.addValidationString('validatorKey', 'message');
-      //vf.addValidationPattern('validatorKey', '%l is required');
-      //vf.addValidationPattern('validatorKey', '%v is too small');
 
       //add specific messages
       /*
@@ -331,6 +330,67 @@ describe('FormlyField', () => {
         createValidField(data);
         expect(vm.form.$errors.search.validatorMessage).to.equal('Must equal test');
       });
+
+      it('Inline messages with values parsed', () => {
+        let data = {
+          form: {
+            $valid: true,
+            $errors: {}
+          },
+          model: {
+            search: 'testing'
+          },
+          fields: [
+            {
+              key: 'search',
+              type: 'test',
+              templateOptions: {
+                label: 'test'
+              },
+              validators: {
+                validatorMessage:
+                {
+                  expression: 'model.search == "test"',
+                  message: '%l and %v'
+                }
+              }
+            }
+          ]
+        };
+
+        createValidField(data);
+        expect(vm.form.$errors.search.validatorMessage).to.equal('test and testing');
+      });
+
+      it('Global messages with values parsed', () => {
+        let data = {
+          form: {
+            $valid: true,
+            $errors: {}
+          },
+          model: {
+            search: 'testing'
+          },
+          fields: [
+            {
+              key: 'search',
+              type: 'test',
+              templateOptions: {
+                label: 'test'
+              },
+              validators: {
+                validatorMessage: 'model.search == "test"',
+              }
+            }
+          ]
+        };
+
+        //just mock the other vue functions
+        Utils.validationMessages.validatorMessage = '%l and %v';
+        
+        createValidField(data);
+        expect(vm.form.$errors.search.validatorMessage).to.equal('test and testing');
+      });
 
     });
 

test/unit/specs/index.spec.js

@@ -1,7 +1,7 @@
 import {expect} from 'chai';
 
 import VueFormly from 'src/index';
-import Util, {addType, getTypes, setError} from 'src/util';
+import Util, {addType, getTypes, setError, addValidationMessage, parseValidationString} from 'src/util';
 
 
 describe('module', () => {
@@ -11,13 +11,14 @@ describe('module', () => {
     expect(VueFormly.install).to.be.a('function');
     expect(VueFormly.addType).to.be.a('function');
     expect(VueFormly.getTypes).to.be.a('function');
+    expect(VueFormly.addValidationMessage).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', () => {
+  it('addType()', () => {
 
     //mock vue
     window.Vue = {
@@ -33,7 +34,7 @@ describe('module', () => {
     expect(getTypes().formly_test).to.deep.equal(newField);
   });
 
-  it('should handle errors',()=>{
+  it('setError()',()=>{
     let form = {
       $errors: {}
     };
@@ -46,5 +47,24 @@ describe('module', () => {
     setError(form, 'fname', 'required', true, 'Hey there');
     expect(form.$errors.fname.required).to.equal('Hey there');
   });
+
+  it('addValidationMessage()', () => {
+    addValidationMessage('test', 'testing');
+    expect(Util.validationMessages.test).to.equal('testing');
+  });
+
+  it('parseValidationString()', () => {
+    addValidationMessage('parseTest', '%l just %v testing');
+    let message = '%l just %v testing';
+    let expected = 'label just value testing';
+    let output = parseValidationString('parseTest', false, 'label', 'value');
+    expect(output).to.equal(expected);
+    
+    output = parseValidationString(false, message, 'label', 'value');
+    expect(output).to.equal(expected);
+
+    output = parseValidationString('blahblahblah', false, '', '');
+    expect(output).to.be.false;
+  });
 
 });