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

adding method for setting nested field values

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} from './util';
+import Util,{getTypes, addType, addValidationMessage, set} from './util';
 import Directives from './directives/index';
 
 
@@ -16,6 +16,7 @@ let Formly = {
     Filters(Vue);
 
     Vue.$formly = {getTypes, addType, addValidationMessage};
+    Vue.prototype.$formlySet = set
   }
 };
 

src/util.js

@@ -19,6 +19,50 @@ export function getTypes(){
   return exports.formlyFields;
 }
 
+/**
+ * Allows deep nesting or not, depending on compatability
+ * Should first check for the deeply nested field. If it doesn't exist then we treat the key as target[key]
+ * If it does exist, then we set it
+ * @param {Object} target
+ * @param {String} key
+ * @param {Mixed} val
+ */
+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);
+    this.$set(newTarget, finalKey, val);
+  } else {
+    this.$set(target, key, val);
+  }
+}
+
+/**
+ * Checks to see whether an object has a deeply nested path
+ * @param {Object} target
+ * @param {String} propertyPath
+ * @returns {Boolean}
+ */
+function hasNestedProperty(obj, propertyPath){
+  if(!propertyPath)
+    return false;
+
+  const properties = propertyPath.split('.');
+
+  for (var i = 0; i < properties.length; i++) {
+    var prop = properties[i];
+
+    if(!obj || !obj.hasOwnProperty(prop)){
+      return false;
+    } else {
+      obj = obj[prop];
+    }
+  }
+
+  return true;
+}
+
 /**
  * Allows a field to add/remove errors to the form
  * @param {Object} form

test/unit/specs/index.spec.js

@@ -1,7 +1,7 @@
 import {expect} from 'chai';
 import Vue from 'vue';
 import VueFormly from 'src/index';
-import Util, {addType, getTypes, setError, addValidationMessage, parseValidationString} from 'src/util';
+import Util, {addType, getTypes, setError, addValidationMessage, parseValidationString, set} from 'src/util';
 
 
 describe('module', () => {
@@ -70,6 +70,44 @@ describe('module', () => {
     expect(output).to.be.false;
   });
 
+  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'
+	    }
+	  }
+	}
+      });
+
+      expect(test.deeply.nested.child).to.equal('foo');
+      test.$formlySet(test.deeply, 'nested.child', 'bar');
+      expect(test.deeply.nested.child).to.equal('bar');
+    });
+
+    it('should set dotted properties', () => {
+      const test = new Vue({
+	data: {
+	  deeply: {
+	    'nested.child': 'foo'
+	  }
+	}
+      });
+      
+      test.$formlySet(test.deeply, 'nested.child', 'bar');
+      expect(test.deeply['nested.child']).to.equal('bar');
+    });
+    
+  });
+
   describe("Directives", () => {
 
     it('formly-atts', () => {