feat(formly-form): add 'watcher' to fieldGroup

originally requested in: http://stackoverflow.com/questions/34850697/clearing-fieldgroups-fields-when-hidden/34857087?noredirect=1#comment57499232_34857087

Author: benoror

src/directives/formly-form.js

@@ -290,7 +290,7 @@ function formlyForm(formlyUsability, formlyWarn, $parse, formlyConfig, $interpol
     }
 
     function setupWatchers(field, index) {
-      if (isFieldGroup(field) || !angular.isDefined(field.watcher)) {
+      if (!angular.isDefined(field.watcher)) {
         return
       }
       let watchers = field.watcher
@@ -313,7 +313,12 @@ function formlyForm(formlyUsability, formlyWarn, $parse, formlyConfig, $interpol
     }
 
     function getWatchExpression(watcher, field, index) {
-      let watchExpression = watcher.expression || 'model[\'' + field.key.toString().split('.').join('\'][\'') + '\']'
+      let watchExpression
+      if (!angular.isUndefined(watcher.expression)) {
+        watchExpression = watcher.expression
+      } else if (field.key) {
+        watchExpression = 'model[\'' + field.key.toString().split('.').join('\'][\'') + '\']'
+      }
       if (angular.isFunction(watchExpression)) {
         // wrap the field's watch expression so we can call it with the field as the first arg
         // and the stop function as the last arg as a helper

src/directives/formly-form.test.js

@@ -952,6 +952,31 @@ describe('formly-form', () => {
       expect(listener).to.have.been.called
       expect(expression).to.have.been.called
     })
+
+    it(`should setup any watchers specified on a fieldgroup`, () => {
+      scope.model = {}
+
+      const listener = sinon.spy()
+      const expression = sinon.spy()
+
+      scope.fields = [{
+        watcher: [{
+          listener: '',
+          expression: '',
+        }, {
+          listener,
+          expression,
+        }],
+        fieldGroup: [
+          getNewField({}),
+          getNewField({}),
+        ],
+      }]
+
+      expect(compileAndDigest).to.not.throw()
+      expect(listener).to.have.been.called
+      expect(expression).to.have.been.called
+    })
   })
 
   describe(`manualModelWatcher option`, () => {

src/providers/formlyApiCheck.js

@@ -77,6 +77,14 @@ const validatorChecker = apiCheck.objectOf(apiCheck.oneOfType([
   }).strict,
 ]))
 
+const watcherChecker = apiCheck.typeOrArrayOf(
+  apiCheck.shape({
+    expression: formlyExpression.optional,
+    listener: formlyExpression.optional,
+    runFieldExpressions: apiCheck.bool.optional,
+  })
+)
+
 const fieldOptionsApiShape = {
   $$hashKey: apiCheck.any.optional,
   type: apiCheck.shape.ifNot(['template', 'templateUrl'], apiCheck.string).optional,
@@ -113,13 +121,7 @@ const fieldOptionsApiShape = {
     getterSetter: apiCheck.bool.optional,
     timezone: apiCheck.string.optional,
   }).optional,
-  watcher: apiCheck.typeOrArrayOf(
-    apiCheck.shape({
-      expression: formlyExpression.optional,
-      listener: formlyExpression.optional,
-      runFieldExpressions: apiCheck.bool.optional,
-    })
-  ).optional,
+  watcher: watcherChecker.optional,
   validators: validatorChecker.optional,
   asyncValidators: validatorChecker.optional,
   parsers: apiCheck.arrayOf(formlyExpression).optional,
@@ -184,6 +186,7 @@ const fieldGroup = apiCheck.shape({
   options: formOptionsApi.optional,
   templateOptions: apiCheck.object.optional,
   wrapper: specifyWrapperType.optional,
+  watcher: watcherChecker.optional,
   hide: apiCheck.bool.optional,
   hideExpression: formlyExpression.optional,
   data: apiCheck.object.optional,