#295 array on change

dist/schema-form.js

@@ -1520,6 +1520,10 @@ angular.module('schemaForm').directive('sfArray', ['sfSelect', 'schemaForm', 'sf
         // It's the (first) array part of the key, '[]' that needs a number
         // corresponding to an index of the form.
         var once = scope.$watch(attrs.sfArray, function(form) {
+          if (!form) {
+            return;
+          }
+
 
           // An array model always needs a key so we know what part of the model
           // to look at. This makes us a bit incompatible with JSON Form, on the
@@ -1529,7 +1533,8 @@ angular.module('schemaForm').directive('sfArray', ['sfSelect', 'schemaForm', 'sf
           // We only modify the same array instance but someone might change the array from
           // the outside so let's watch for that. We use an ordinary watch since the only case
           // we're really interested in is if its a new instance.
-          scope.$watch('model' + sfPath.normalize(form.key), function(value) {
+          var key = sfPath.normalize(form.key);
+          scope.$watch('model' + (key[0] !== '[' ? '.' : '') + key, function(value) {
             list = scope.modelArray = value;
           });
 

examples/data/array.json

@@ -44,6 +44,7 @@
     },
     {
       "key": "comments",
+      "onChange" : "say(modelValue.length)",
   	  "add": "New",
   	  "style": {
   		"add": "btn-success"

src/directives/array.js

@@ -33,6 +33,10 @@ angular.module('schemaForm').directive('sfArray', ['sfSelect', 'schemaForm', 'sf
         // It's the (first) array part of the key, '[]' that needs a number
         // corresponding to an index of the form.
         var once = scope.$watch(attrs.sfArray, function(form) {
+          if (!form) {
+            return;
+          }
+
 
           // An array model always needs a key so we know what part of the model
           // to look at. This makes us a bit incompatible with JSON Form, on the
@@ -42,7 +46,8 @@ angular.module('schemaForm').directive('sfArray', ['sfSelect', 'schemaForm', 'sf
           // We only modify the same array instance but someone might change the array from
           // the outside so let's watch for that. We use an ordinary watch since the only case
           // we're really interested in is if its a new instance.
-          scope.$watch('model' + sfPath.normalize(form.key), function(value) {
+          var key = sfPath.normalize(form.key);
+          scope.$watch('model' + (key[0] !== '[' ? '.' : '') + key, function(value) {
             list = scope.modelArray = value;
           });
 
@@ -77,6 +82,14 @@ angular.module('schemaForm').directive('sfArray', ['sfSelect', 'schemaForm', 'sf
 
           }
 
+          var onChangeHandler = !form.onChange ? angular.noop : function(list) {
+            if (angular.isFunction(form.onChange)) {
+              form.onChange(list, form);
+            } else {
+              scope.$parent.evalExpr(form.onChange, {'modelValue': list, form: form});
+            }
+          }
+
           // We ceate copies of the form on demand, caching them for
           // later requests
           scope.copyWithIndex = function(index) {
@@ -127,6 +140,9 @@ angular.module('schemaForm').directive('sfArray', ['sfSelect', 'schemaForm', 'sf
 
             // Trigger validation.
             scope.validateArray();
+
+            onChangeHandler(list);
+
             return list;
           };
 
@@ -136,6 +152,8 @@ angular.module('schemaForm').directive('sfArray', ['sfSelect', 'schemaForm', 'sf
             // Trigger validation.
             scope.validateArray();
 
+            onChangeHandler(list);
+
             // Angular 1.2 lacks setDirty
             if (ngModel && ngModel.$setDirty) {
               ngModel.$setDirty();

test/directives/schema-form-test.js

@@ -252,9 +252,9 @@ describe('directive',function(){
       tmpl.children().eq(2).children().eq(0).find('button').length.should.be.equal(1);
       tmpl.children().eq(2).children().eq(0).find('button').text().should.include('Okidoki');
 
-      scope.form[1].onClick.should.not.have.beenCalled;
+      scope.form[1].onClick.should.not.have.been.called;
       tmpl.children().eq(2).children().eq(0).find('button').click();
-      scope.form[1].onClick.should.have.beenCalledOnce;
+      scope.form[1].onClick.should.have.been.calledOnce;
     });
   });
 
@@ -1827,6 +1827,49 @@ describe('directive',function(){
     });
   });
 
+  it('should handle onChange for array type', function () {
+    inject(function($compile,$rootScope){
+      var scope = $rootScope.$new();
+      scope.obj = {};
+
+      scope.schema = {
+        "type": "object",
+        "properties": {
+          "arr" : {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "name": {
+                  "type": "string",
+                  "default": "Name"
+                }
+              }
+            }
+          }
+        }
+      };
+
+      scope.form = [{key : "arr", startEmpty : true, onChange: sinon.spy()}];
+
+      var tmpl = angular.element('<form sf-schema="schema" sf-form="form" sf-model="obj"></form>');
+
+      $compile(tmpl)(scope);
+      $rootScope.$apply();
+
+
+      scope.form[0].onChange.should.not.have.been.called;
+
+
+      tmpl.find('button.btn-default').click();
+      scope.form[0].onChange.should.have.been.calledWith([{name : "Name"}]);
+
+      tmpl.find('button.close').click();
+      scope.form[0].onChange.should.have.been.calledWith([]);
+
+    });
+  });
+
   it('should load template by templateUrl, with template field type',function() {
 
     inject(function($compile, $rootScope, $httpBackend){
@@ -2358,7 +2401,6 @@ describe('directive',function(){
       });
     });
 
-
   });
 
 });