Merge pull request #572 from MCKRUZ/master

fix(formly-field): Breaking change in @7.3.2? Key value? #566

Author: Kent C. Dodds

src/directives/formly-field.js

@@ -35,7 +35,7 @@ function formlyField($http, $q, $compile, $templateCache, $interpolate, formlyCo
 
   // @ngInject
   function FormlyFieldController($scope, $timeout, $parse, $controller, formlyValidationMessages) {
-    /* eslint max-statements:[2, 31] */
+    /* eslint max-statements:[2, 32] */
     if ($scope.options.fieldGroup) {
       setupFieldGroup()
       return
@@ -82,13 +82,17 @@ function formlyField($http, $q, $compile, $templateCache, $interpolate, formlyCo
       return parseGet($scope.options.key, $scope.model)
     }
 
+    function shouldNotUseParseKey(key) {
+      return angular.isNumber(key) || (/^\d/.test(key) && key.indexOf('[') === -1)
+    }
+
     function parseSet(key, model, newVal) {
       // If either of these are null/undefined then just return undefined
       if (!key || !model) {
         return
       }
       // If we are working with a number then $parse wont work, default back to the old way for now
-      if (angular.isNumber(key)) {
+      if (shouldNotUseParseKey(key)) {
         // TODO: Fix this so we can get several levels instead of just one with properties that are numeric
         model[key] = newVal
       } else {
@@ -106,7 +110,7 @@ function formlyField($http, $q, $compile, $templateCache, $interpolate, formlyCo
       }
 
       // If we are working with a number then $parse wont work, default back to the old way for now
-      if (angular.isNumber(key)) {
+      if (shouldNotUseParseKey(key)) {
         // TODO: Fix this so we can get several levels instead of just one with properties that are numeric
         return model[key]
       } else {

src/directives/formly-field.test.js

@@ -519,6 +519,72 @@ describe('formly-field', function() {
     })
   })
 
+  describe('getterSetters', () => {
+    it('should get and set values when key is all alpha', () => {
+      const key = 'foo'
+      const defaultValue = 'bar'
+
+      scope.fields = [
+        {template: input, key, defaultValue},
+      ]
+      scope.model = {}
+
+      compileAndDigest()
+      expect(scope.model[key]).to.eq(defaultValue)
+    })
+
+    it('should get and set values when key is all numeric', () => {
+      const key = '1333'
+      const defaultValue = 'bar'
+
+      scope.fields = [
+        {template: input, key, defaultValue},
+      ]
+      scope.model = {}
+
+      compileAndDigest()
+      expect(scope.model[key]).to.eq(defaultValue)
+    })
+
+    it('should get and set values when key is alpha numeric with alpha first', () => {
+      const key = 'A1'
+      const defaultValue = 'bar'
+
+      scope.fields = [
+        {template: input, key, defaultValue},
+      ]
+      scope.model = {}
+
+      compileAndDigest()
+      expect(scope.model[key]).to.eq(defaultValue)
+    })
+
+    it('should get and set values when key is alpha numeric with numeric first', () => {
+      const key = '1A'
+      const defaultValue = 'bar'
+
+      scope.fields = [
+        {template: input, key, defaultValue},
+      ]
+      scope.model = {}
+
+      compileAndDigest()
+      expect(scope.model[key]).to.eq(defaultValue)
+    })
+
+    it('should work with nested keys with numbers in the key', () => {
+      const key = 'foo3bar.baz4foobar'
+      const defaultValue = 'baz'
+      scope.fields = [
+        {template: input, key, defaultValue},
+      ]
+      scope.model = {}
+
+      compileAndDigest()
+      expect(scope.model.foo3bar.baz4foobar).to.equal(defaultValue)
+    })
+  })
+
   describe(`id property`, () => {
     it(`should default to a semi-random id that you cannot rely on and don't have to think about`, () => {
       scope.fields = [getNewField()]