Fixed #380 - hideExpression is now called on field's model change; optimized number of field model watchers (one per object)

Author: redhead

src/directives/formly-field.js

@@ -16,6 +16,7 @@ function formlyField($http, $q, $compile, $templateCache, $interpolate, formlyCo
   return {
     restrict: 'AE',
     transclude: true,
+    require: '?^formlyForm',
     scope: {
       options: '=',
       model: '=',
@@ -51,7 +52,6 @@ function formlyField($http, $q, $compile, $templateCache, $interpolate, formlyCo
     setDefaultValue();
     setInitialValue();
     runExpressions();
-    addModelWatcher($scope, $scope.options);
     addValidationMessages($scope.options);
     invokeControllers($scope, $scope.options, fieldType);
 
@@ -146,13 +146,6 @@ function formlyField($http, $q, $compile, $templateCache, $interpolate, formlyCo
       });
     }
 
-    // initialization functions
-    function addModelWatcher(scope, options) {
-      if (options.model) {
-        scope.$watch('options.model', runExpressions, true);
-      }
-    }
-
     function resetModel() {
       $scope.model[$scope.options.key] = $scope.options.initialValue;
       if ($scope.options.formControl) {
@@ -212,12 +205,17 @@ function formlyField($http, $q, $compile, $templateCache, $interpolate, formlyCo
 
 
   // link function
-  function fieldLink(scope, el) {
+  function fieldLink(scope, el, attrs, formlyFormCtrl) {
     if (scope.options.fieldGroup) {
       setFieldGroupTemplate();
       return;
     }
 
+    // watch the field model (if exists) if there is no parent formly-form directive (that would watch it instead)
+    if (!formlyFormCtrl && scope.options.model) {
+      scope.$watch('options.model', () => scope.options.runExpressions(), true);
+    }
+
     addAttributes();
     addClasses();
 

src/directives/formly-field.test.js

@@ -1359,6 +1359,24 @@ describe('formly-field', function() {
       expect(() => compileAndDigest()).to.throw();
     });
 
+    it(`should watch the model when it's not the direct child of a formly-form`, () => {
+      scope.fields = [
+        getNewField({key: 'foo', model: {}})
+      ];
+
+      compileAndDigest('<div formly-field class="formly-field" options="fields[0]" model="fields[0].model"></div>');
+      $timeout.flush();
+
+      const expressionPropertySpy = sinon.spy();
+      field.expressionProperties = {'data.dummy': expressionPropertySpy};
+
+      field.model.foo = 'hello';
+      scope.$digest();
+      $timeout.flush();
+
+      expect(expressionPropertySpy).to.have.been.calledOnce;
+    });
+
   });
 
   describe(`fieldGroup`, () => {

src/directives/formly-form.js

@@ -120,7 +120,7 @@ function formlyForm(formlyUsability, formlyWarn, $parse, formlyConfig, $interpol
       angular.forEach($scope.fields, function runFieldExpressionProperties(field, index) {
         /*jshint -W030 */
         const model = field.model || $scope.model;
-        field.runExpressions && field.runExpressions(model);
+        field.runExpressions && field.runExpressions();
         if (field.hideExpression) { // can't use hide with expressionProperties reliably
           const val = model[field.key];
           field.hide = evalCloseToFormlyExpression(field.hideExpression, val, field, index);
@@ -139,7 +139,8 @@ function formlyForm(formlyUsability, formlyWarn, $parse, formlyConfig, $interpol
         }
       }
 
-      angular.forEach($scope.fields, initModel); // initializes the model property if set to 'formState'
+      setupModels();
+
       angular.forEach($scope.fields, attachKey); // attaches a key based on the index if a key isn't specified
       angular.forEach($scope.fields, setupWatchers); // setup watchers for all fields
     }
@@ -179,6 +180,20 @@ function formlyForm(formlyUsability, formlyWarn, $parse, formlyConfig, $interpol
       });
     }
 
+    function setupModels() {
+      // a set of field models that are already watched (the $scope.model will have its own watcher)
+      const watchedModels = [$scope.model];
+
+      angular.forEach($scope.fields, (field) => {
+        initModel(field);
+
+        if (field.model && watchedModels.indexOf(field.model) === -1) {
+          $scope.$watch(() => field.model, onModelOrFormStateChange, true);
+          watchedModels.push(field.model);
+        }
+      });
+    }
+
     function initModel(field) {
       if (angular.isString(field.model)) {
         const expression = field.model;

src/directives/formly-form.test.js

@@ -375,6 +375,64 @@ describe('formly-form', () => {
 
   });
 
+  describe('an instance of model', () => {
+    const spy1 = sinon.spy();
+    const spy2 = sinon.spy();
+
+    beforeEach(() => {
+      scope.model = {};
+      scope.fieldModel1 = {};
+
+      scope.fields = [
+        {template: input, key: 'foo', model: scope.fieldModel1},
+        {template: input, key: 'bar', model: scope.fieldModel1},
+        {template: input, key: 'zoo', model: scope.fieldModel1}
+      ];
+    });
+
+    it('should be assigned with only one watcher', () => {
+      compileAndDigest();
+      $timeout.flush();
+
+      scope.fields[0].expressionProperties = {'data.dummy': spy1};
+      scope.fields[1].expressionProperties = {'data.dummy': spy2};
+
+      scope.fieldModel1.foo = 'value';
+      scope.$digest();
+      $timeout.flush();
+
+      expect(spy1).to.have.been.calledOnce;
+      expect(spy2).to.have.been.calledOnce;
+    });
+  });
+
+  describe('hideExpression', () => {
+    beforeEach(() => {
+      scope.model = {};
+      scope.fieldModel = {};
+
+      scope.fields = [
+        {template: input, key: 'foo', model: scope.fieldModel},
+        {template: input, key: 'bar', model: scope.fieldModel, hideExpression: () => !!scope.fieldModel.foo}
+      ];
+    });
+
+    it('should be called and resolve to true when field model changes', () => {
+      compileAndDigest();
+      expect(scope.fields[1].hide).be.false;
+      scope.fields[0].formControl.$setViewValue('value');
+      expect(scope.fields[1].hide).be.true;
+    });
+
+    it('should be called and resolve to false when field model changes', () => {
+      scope.fieldModel.foo = 'value';
+      compileAndDigest();
+      expect(scope.fields[1].hide).be.true;
+      scope.fields[0].formControl.$setViewValue('');
+      expect(scope.fields[1].hide).be.false;
+    });
+  });
+
   describe(`options`, () => {
     beforeEach(() => {
       scope.model = {