Merge pull request #31 from formly-js/nested-fields

Retrieving nested fields

Author: matt-sanders

src/index.js

@@ -1,6 +1,6 @@
 import Components from './components/index';
 import Filters from './filters/index';
-import Util,{getTypes, addType, addValidationMessage, set} from './util';
+import Util,{getTypes, addType, addValidationMessage, set, get} from './util';
 import Directives from './directives/index';
 
 
@@ -16,7 +16,8 @@ let Formly = {
     Filters(Vue);
 
     Vue.$formly = {getTypes, addType, addValidationMessage};
-    Vue.prototype.$formlySet = set
+    Vue.prototype.$formlySet = set;
+    Vue.prototype.$formlyGet = get;
   }
 };
 

src/util.js

@@ -11,11 +11,11 @@ export default exports;
  * @param {String} id
  * @param {Object} options
  */
-export function addType(id, options){
-  exports.formlyFields['formly_'+id] = options;
+export function addType(id, options) {
+  exports.formlyFields['formly_' + id] = options;
 }
 
-export function getTypes(){
+export function getTypes() {
   return exports.formlyFields;
 }
 
@@ -27,40 +27,52 @@ export function getTypes(){
  * @param {String} key
  * @param {Mixed} val
  */
-export function set(target, key, val){
-  if ( hasNestedProperty( target, key ) ){
+export function set(target, key, val) {
+  if (hasNestedProperty(target, key)) {
     const parts = key.split('.');
     const finalKey = parts.pop();
-    const newTarget = parts.reduce( (acc, cur) => acc[cur], target);
+    const newTarget = parts.reduce((acc, cur) => acc[cur], target);
     this.$set(newTarget, finalKey, val);
   } else {
     this.$set(target, key, val);
   }
 }
 
+/**
+ * returns an object value by string
+ * @param {Object} target
+ * @param {String} key
+ */
+export function get(target, key) {
+  const hasNested = hasNestedProperty(target, key, true);
+  return hasNested === null ? target[key] : hasNested;
+}
+
 /**
  * Checks to see whether an object has a deeply nested path
  * @param {Object} target
  * @param {String} propertyPath
- * @returns {Boolean}
+ * @param {Boolean} returnVal
+ * @returns {Boolean || Any} will return either true/false for existance or the actual value
  */
-function hasNestedProperty(obj, propertyPath){
-  if(!propertyPath)
-    return false;
+function hasNestedProperty(obj, propertyPath, returnVal = false) {
+  if (!propertyPath) return false;
 
+  // strip the leading dot
+  propertyPath = propertyPath.replace(/^\./, '');
   const properties = propertyPath.split('.');
 
   for (var i = 0; i < properties.length; i++) {
     var prop = properties[i];
 
-    if(!obj || !obj.hasOwnProperty(prop)){
-      return false;
+    if (!obj || !obj.hasOwnProperty(prop)) {
+      return returnVal ? null : false;
     } else {
       obj = obj[prop];
     }
   }
 
-  return true;
+  return returnVal ? obj : true;
 }
 
 /**
@@ -70,8 +82,8 @@ function hasNestedProperty(obj, propertyPath){
  * @param {String} err
  * @param {Bool} isError
  */
-export function setError(form, key, err, isError, message = false){
-  if ( !form.$errors[key] ) form.$errors[key] = {};
+export function setError(form, key, err, isError, message = false) {
+  if (!form.$errors[key]) form.$errors[key] = {};
   form.$errors[key][err] = isError ? message || isError : false;
 }
 
@@ -80,8 +92,8 @@ export function setError(form, key, err, isError, message = false){
  * @param {string} key
  * @param {string} message
  */
-export function addValidationMessage(key, message){
-  exports.validationMessages[ key ] = message;
+export function addValidationMessage(key, message) {
+  exports.validationMessages[key] = message;
 }
 
 /**
@@ -91,13 +103,12 @@ export function addValidationMessage(key, message){
  * @param {string} label
  * @param {string} value
  */
-export function parseValidationString(key, message, label, 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;
-  
+  if (key && !(key in exports.validationMessages) && !message) return false;
+
   // first check if a validation message with this key exists
-  if ( key in exports.validationMessages ){
+  if (key in exports.validationMessages) {
     message = exports.validationMessages[key];
   }
 

test/unit/specs/index.spec.js

@@ -1,11 +1,17 @@
 import {expect} from 'chai';
 import Vue from 'vue';
 import VueFormly from 'src/index';
-import Util, {addType, getTypes, setError, addValidationMessage, parseValidationString, set} from 'src/util';
-
+import Util, {
+  addType,
+  getTypes,
+  setError,
+  addValidationMessage,
+  parseValidationString,
+  set,
+  get
+} from 'src/util';
 
 describe('module', () => {
-
   it('module props', () => {
     expect(VueFormly).to.exist;
     expect(VueFormly.install).to.be.a('function');
@@ -19,11 +25,10 @@ describe('module', () => {
   });
 
   it('addType()', () => {
-
     //mock vue
     window.Vue = {
-      component(){},
-      filter(){}
+      component() {},
+      filter() {}
     };
     VueFormly.install(Vue);
 
@@ -34,7 +39,7 @@ describe('module', () => {
     expect(getTypes().formly_test).to.deep.equal(newField);
   });
 
-  it('setError()',()=>{
+  it('setError()', () => {
     let form = {
       $errors: {}
     };
@@ -62,30 +67,54 @@ describe('module', () => {
     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;
   });
 
-  describe('set()', () => {
+  describe('get()', () => {
+    it('should be present on the Vue instance', () => {
+      const test = new Vue();
+      expect(test.$formlyGet).to.be.a('function');
+    });
+
+    it('should get a nested field, and one with dot notation', () => {
+      const test = new Vue({
+        data: {
+          deeply: {
+            nested: {
+              child: 'foo'
+            },
+            'child.nested': 'bar'
+          }
+        }
+      });
 
+      expect(test.deeply.nested.child).to.equal('foo');
+      expect(test.deeply['child.nested']).to.equal('bar');
+      expect(test.$formlyGet(test.deeply, 'nested.child')).to.equal('foo');
+      expect(test.$formlyGet(test.deeply, 'child.nested')).to.equal('bar');
+    });
+  });
+
+  describe('set()', () => {
     it('should be present on the Vue instance', () => {
       const test = new Vue();
       expect(test.$formlySet).to.be.a('function');
     });
 
     it('should take a nested field', () => {
       const test = new Vue({
-	data: {
-	  deeply: {
-	    nested: {
-	      child: 'foo'
-	    }
-	  }
-	}
+        data: {
+          deeply: {
+            nested: {
+              child: 'foo'
+            }
+          }
+        }
       });
 
       expect(test.deeply.nested.child).to.equal('foo');
@@ -95,55 +124,49 @@ describe('module', () => {
 
     it('should set dotted properties', () => {
       const test = new Vue({
-	data: {
-	  deeply: {
-	    'nested.child': 'foo'
-	  }
-	}
+        data: {
+          deeply: {
+            'nested.child': 'foo'
+          }
+        }
       });
-      
+
       test.$formlySet(test.deeply, 'nested.child', 'bar');
       expect(test.deeply['nested.child']).to.equal('bar');
     });
-    
   });
 
-  describe("Directives", () => {
-
+  describe('Directives', () => {
     it('formly-atts', () => {
       let atts = {
-	placeholder: 'testing',
-	foo: 'bar'
+        placeholder: 'testing',
+        foo: 'bar'
       };
 
       let el = document.createElement('div');
-      
+
       let vm = new Vue({
-	data: {
-	  atts: atts
-	},
-	template: '<div v-formly-atts="atts"></div>'
+        data: {
+          atts: atts
+        },
+        template: '<div v-formly-atts="atts"></div>'
       }).$mount(el);
 
       expect(vm.$el.getAttribute('placeholder')).to.equal(atts.placeholder);
       expect(vm.$el.getAttribute('foo')).to.equal(atts.foo);
     });
 
     it('formly-input-type', () => {
-
       let el = document.createElement('div');
-      
+
       let vm = new Vue({
-	data: {
-	  type: 'email'
-	},
-	template: '<input type="text" v-formly-input-type="type">'
+        data: {
+          type: 'email'
+        },
+        template: '<input type="text" v-formly-input-type="type">'
       }).$mount(el);
 
       expect(vm.$el.getAttribute('type')).to.equal('email');
-      
     });
-    
   });
-  
 });