Fixes #426: Support for nested model attribute (watcher optimization)

Author: redhead

src/directives/formly-form.js

@@ -186,20 +186,32 @@ function formlyForm(formlyUsability, formlyWarn, $parse, formlyConfig, $interpol
       // a set of field models that are already watched (the $scope.model will have its own watcher)
       const watchedModels = [$scope.model];
 
+      if ($scope.options.formState) {
+        // $scope.options.formState will have its own watcher
+        watchedModels.push($scope.options.formState);
+      }
+
       angular.forEach($scope.fields, (field) => {
-        initModel(field);
+        const isNewModel = initModel(field);
 
-        if (field.model && watchedModels.indexOf(field.model) === -1) {
+        if (field.model && isNewModel && watchedModels.indexOf(field.model) === -1) {
           $scope.$watch(() => field.model, onModelOrFormStateChange, true);
           watchedModels.push(field.model);
         }
       });
     }
 
     function initModel(field) {
+      let isNewModel = true;
+
       if (angular.isString(field.model)) {
         const expression = field.model;
         const index = $scope.fields.indexOf(field);
+
+        if (formlyUtil.startsWith(expression, 'model.') || formlyUtil.startsWith(expression, 'formState.')) {
+          isNewModel = false;
+        }
+
         field.model = evalCloseToFormlyExpression(expression, undefined, field, index);
         if (!field.model) {
           throw formlyUsability.getFieldError(
@@ -209,6 +221,7 @@ function formlyForm(formlyUsability, formlyWarn, $parse, formlyConfig, $interpol
             field);
         }
       }
+      return isNewModel;
     }
 
     function attachKey(field, index) {

src/directives/formly-form.test.js

@@ -406,6 +406,58 @@ describe('formly-form', () => {
     });
   });
 
+  describe('nested model as string', () => {
+    let spy;
+
+    beforeEach(() => {
+      spy = sinon.spy();
+
+      scope.model = {
+        nested: {}
+      };
+
+      scope.fields = [
+        {template: input, key: 'foo'}
+      ];
+    });
+
+    it('starting with "model." should be assigned with only one watcher', () => {
+      scope.fields[0].model = 'model.nested';
+
+      compileAndDigest();
+      $timeout.flush();
+
+      scope.fields[0].expressionProperties = {'data.dummy': spy};
+
+      scope.model.nested.foo = 'value';
+      scope.$digest();
+      $timeout.flush();
+
+      expect(spy).to.have.been.calledOnce;
+    });
+
+    it('starting with "formState." should be assigned with only one watcher', () => {
+      const formWithOptions = '<formly-form model="model" fields="fields" options="options"></formly-form>';
+      scope.options = {
+        formState: {
+          nested: {}
+        }
+      };
+      scope.fields[0].model = 'formState.nested';
+
+      compileAndDigest(formWithOptions);
+      $timeout.flush();
+
+      scope.fields[0].expressionProperties = {'data.dummy': spy};
+
+      scope.options.formState.nested.foo = 'value';
+      scope.$digest();
+      $timeout.flush();
+
+      expect(spy).to.have.been.calledOnce;
+    });
+  });
+
   describe('hideExpression', () => {
     beforeEach(() => {
       scope.model = {};

src/other/utils.js

@@ -1,6 +1,6 @@
 import angular from 'angular-fix';
 
-export default {formlyEval, getFieldId, reverseDeepMerge, findByNodeName, arrayify, extendFunction, extendArray};
+export default {formlyEval, getFieldId, reverseDeepMerge, findByNodeName, arrayify, extendFunction, extendArray, startsWith};
 
 function formlyEval(scope, expression, $modelValue, $viewValue, extraLocals) {
   if (angular.isFunction(expression)) {
@@ -102,3 +102,10 @@ function extendArray(primary, secondary, property) {
   }
 }
 
+function startsWith(str, search) {
+  if (angular.isString(str) && angular.isString(search)) {
+    return str.length >= search.length && str.substring(0, search.length) === search;
+  } else {
+    return false;
+  }
+}

src/other/utils.test.js

@@ -2,7 +2,7 @@
 import utils from './utils.js';
 
 // gotta do this because webstorm/jshint doesn't like destructuring imports :-(
-const {extendFunction} = utils;
+const {extendFunction, startsWith} = utils;
 
 
 describe(`utils`, () => {
@@ -23,4 +23,22 @@ describe(`utils`, () => {
     });
   });
 
+  describe(`startsWith`, () => {
+    it(`should return true if a string has a given prefix`, () => {
+      expect(startsWith('fooBar', 'foo')).to.be.true;
+    });
+
+    it(`should return false if a string does not have a given prefix`, () => {
+      expect(startsWith('fooBar', 'nah')).to.be.false;
+    });
+
+    it(`should return false if no a string`, () => {
+      expect(startsWith(undefined, 'foo')).to.be.false;
+      expect(startsWith(5, 'foo')).to.be.false;
+      expect(startsWith('foo', undefined)).to.be.false;
+      expect(startsWith('foo', 5)).to.be.false;
+      expect(startsWith(undefined, undefined)).to.be.false;
+    });
+  });
+
 });