feat(ngModelAttrsManipulator): 🎆 Add support for property accessor keys 🎇

This simply replaces the  with the given key and is prefixed with . Unfortunately,
this current approach wont work for braket syntax for the first property, but should cover most use
cases

closes #452 BREAKING CHANGE: We're now altering the ng-model regardless of anything. If you used to
have dots or brackets in your properties, this will break you. Most of you probably wont have a
problem.

Author: Kent C. Dodds

src/other/utils.js

@@ -1,6 +1,8 @@
 import angular from 'angular-fix';
 
-export default {formlyEval, getFieldId, reverseDeepMerge, findByNodeName, arrayify, extendFunction, extendArray, startsWith};
+export default {
+  formlyEval, getFieldId, reverseDeepMerge, findByNodeName, arrayify, extendFunction, extendArray, startsWith, contains
+};
 
 function formlyEval(scope, expression, $modelValue, $viewValue, extraLocals) {
   if (angular.isFunction(expression)) {
@@ -109,3 +111,11 @@ function startsWith(str, search) {
     return false;
   }
 }
+
+function contains(str, search) {
+  if (angular.isString(str) && angular.isString(search)) {
+    return str.length >= search.length && str.indexOf(search) !== -1;
+  } else {
+    return false;
+  }
+}

src/run/formlyNgModelAttrsManipulator.js

@@ -1,4 +1,5 @@
 import angular from 'angular-fix';
+import {contains} from '../other/utils';
 
 export default addFormlyNgModelAttrsManipulator;
 
@@ -27,6 +28,7 @@ function addFormlyNgModelAttrsManipulator(formlyConfig, $interpolate, formlyWarn
     addIfNotPresent(modelNodes, 'name', scope.name || scope.id);
 
     addValidation();
+    alterNgModelAttr();
     addModelOptions();
     addTemplateOptionsAttrs();
     addNgModelElAttrs();
@@ -41,13 +43,17 @@ function addFormlyNgModelAttrsManipulator(formlyConfig, $interpolate, formlyWarn
       }
     }
 
+    function alterNgModelAttr() {
+      if (isPropertyAccessor(options.key)) {
+        addRegardlessOfPresence(modelNodes, 'ng-model', 'model.' + options.key);
+      }
+    }
+
     function addModelOptions() {
       if (angular.isDefined(options.modelOptions)) {
         addIfNotPresent(modelNodes, 'ng-model-options', 'options.modelOptions');
         if (options.modelOptions.getterSetter) {
-          angular.forEach(modelNodes, modelNode => {
-            modelNode.setAttribute('ng-model', 'options.value');
-          });
+          addRegardlessOfPresence(modelNodes, 'ng-model', 'options.value');
         }
       }
     }
@@ -235,4 +241,14 @@ function addFormlyNgModelAttrsManipulator(formlyConfig, $interpolate, formlyWarn
       }
     });
   }
+
+  function addRegardlessOfPresence(nodes, attr, val) {
+    angular.forEach(nodes, node => {
+      node.setAttribute(attr, val);
+    });
+  }
+
+  function isPropertyAccessor(key) {
+    return contains(key, '.') || (contains(key, '[') && contains(key, ']'));
+  }
 }

src/run/formlyNgModelAttrsManipulator.test.js

@@ -194,6 +194,19 @@ describe('formlyNgModelAttrsManipulator', () => {
     });
   });
 
+  describe(`selector key notation`, () => {
+    it(`should change the ng-model when the key is a dot property accessor`, () => {
+      field.key = 'bar.foo';
+      manipulate();
+      expect(resultEl.attr('ng-model')).to.equal('model.' + field.key);
+    });
+
+    it(`should change the ng-model when the key is a bracket property accessor`, () => {
+      field.key = 'bar["foo-bar"]';
+      manipulate();
+      expect(resultEl.attr('ng-model')).to.equal('model.' + field.key);
+    });
+  });
 
   describe(`formly-custom-validation`, () => {
     it(`shouldn't be added if there aren't validators or messages`, () => {