fix(formly-field): Added fix for nested object properties - issue number 531

Added new methods for getters and setters to use

Author: MCKRUZ

src/directives/formly-field.js

@@ -77,9 +77,41 @@ function formlyField($http, $q, $compile, $templateCache, $interpolate, formlyCo
         return undefined
       }
       if (angular.isDefined(newVal)) {
-        $scope.model[$scope.options.key] = newVal
+        parseSet($scope.options.key, $scope.model, newVal)
+      }
+      return parseGet($scope.options.key, $scope.model)
+    }
+
+    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)) {
+        // TODO: Fix this so we can get several levels instead of just one with properties that are numeric
+        model[key] = newVal
+      } else {
+        const setter = $parse($scope.options.key).assign
+        if (setter) {
+          setter($scope.model, newVal)
+        }
+      }
+    }
+
+    function parseGet(key, model) {
+      // If either of these are null/undefined then just return undefined
+      if (!key || !model) {
+        return undefined
+      }
+
+      // If we are working with a number then $parse wont work, default back to the old way for now
+      if (angular.isNumber(key)) {
+        // TODO: Fix this so we can get several levels instead of just one with properties that are numeric
+        return model[key]
+      } else {
+        return $parse(key)(model)
       }
-      return $scope.model[$scope.options.key]
     }
 
     function simplifyLife(options) {
@@ -109,14 +141,14 @@ function formlyField($http, $q, $compile, $templateCache, $interpolate, formlyCo
     }
 
     function setDefaultValue() {
-      if (angular.isDefined($scope.options.defaultValue) && !angular.isDefined($scope.model[$scope.options.key])) {
-        const setter = $parse($scope.options.key).assign
-        setter($scope.model, $scope.options.defaultValue)
+      if (angular.isDefined($scope.options.defaultValue) &&
+          !angular.isDefined(parseGet($scope.options.key, $scope.model))) {
+        parseSet($scope.options.key, $scope.model, $scope.options.defaultValue)
       }
     }
 
     function setInitialValue() {
-      $scope.options.initialValue = $scope.model && $scope.model[$scope.options.key]
+      $scope.options.initialValue = $scope.model && parseGet($scope.options.key, $scope.model)
     }
 
     function mergeFieldOptionsWithTypeDefaults(options, type) {
@@ -151,7 +183,7 @@ function formlyField($http, $q, $compile, $templateCache, $interpolate, formlyCo
     }
 
     function resetModel() {
-      $scope.model[$scope.options.key] = $scope.options.initialValue
+      parseSet($scope.options.key, $scope.model, $scope.options.initialValue)
       if ($scope.options.formControl) {
         if (angular.isArray($scope.options.formControl)) {
           angular.forEach($scope.options.formControl, function(formControl) {
@@ -165,7 +197,7 @@ function formlyField($http, $q, $compile, $templateCache, $interpolate, formlyCo
 
     function resetFormControl(formControl, isMultiNgModel) {
       if (!isMultiNgModel) {
-        formControl.$setViewValue($scope.model[$scope.options.key])
+        formControl.$setViewValue(parseGet($scope.options.key, $scope.model))
       }
 
       formControl.$render()
@@ -179,7 +211,7 @@ function formlyField($http, $q, $compile, $templateCache, $interpolate, formlyCo
     }
 
     function updateInitialValue() {
-      $scope.options.initialValue = $scope.model[$scope.options.key]
+      $scope.options.initialValue = parseGet($scope.options.key, $scope.model)
     }
 
     function addValidationMessages(options) {

src/directives/formly-field.test.js

@@ -1240,6 +1240,51 @@ describe('formly-field', function() {
       expect(field.formControl.$dirty).to.be.false
     })
 
+    it(`should reset the form state with a deep model`, () => {
+      const field = getNewField({key: 'foo.bar'})
+      scope.fields = [field]
+      compileAndDigest()
+
+      // initial state
+      expect(field.formControl.$dirty).to.be.false
+      expect(field.formControl.$touched).to.be.false
+
+      // modification
+      scope.model.foo = {
+        bar: '~=[,,_,,]:3',
+      }
+      field.formControl.$setTouched()
+      field.formControl.$setDirty()
+      scope.$digest()
+
+      // expect modification
+      expect(field.formControl.$dirty).to.be.true
+      expect(field.formControl.$touched).to.be.true
+      expect(field.formControl.$modelValue).to.eq('~=[,,_,,]:3')
+
+      // Set new initialValue
+      scope.options.updateInitialValue()
+
+      // Modify again
+      scope.model.foo.bar = 'l33t'
+      field.formControl.$setTouched()
+      field.formControl.$setDirty()
+      scope.$digest()
+
+      // expect modification
+      expect(field.formControl.$dirty).to.be.true
+      expect(field.formControl.$touched).to.be.true
+      expect(field.formControl.$modelValue).to.eq('l33t')
+
+      // reset state
+      scope.options.resetModel()
+
+      // expect reset
+      expect(field.formControl.$modelValue).to.eq('~=[,,_,,]:3')
+      expect(field.formControl.$touched).to.be.false
+      expect(field.formControl.$dirty).to.be.false
+    })
+
     it(`should reset the form state for an field with multiple ng-models`, () => {
       const field = {
         key: 'multiNgModel',