Merge pull request #570 from MCKRUZ/master

fix(formly-field): Watch does not work on deep properties #542

Author: Kent C. Dodds

src/directives/formly-field.test.js

@@ -1548,6 +1548,27 @@ describe('formly-field', function() {
       expect(expressionPropertySpy).to.have.been.calledOnce
     })
 
+    it(`should add watches on deep dive fields`, () => {
+      const formWithOptions = '<formly-form model="model" fields="fields" options="options"></formly-form>'
+      scope.model = {}
+      scope.options = {}
+
+      const deepLinkField = getNewField()
+      deepLinkField.key = 'foo.bar'
+      deepLinkField.watcher = {
+        listener: sinon.spy(),
+      }
+
+      scope.fields = [deepLinkField]
+      compileAndDigest(formWithOptions)
+      expect(deepLinkField.watcher.listener).to.have.been.called
+      scope.model.foo = {
+        bar: 'brown',
+      }
+      scope.$digest()
+      expect(deepLinkField.watcher.listener).to.have.been.called
+    })
+
     it('should make original model available on field scope, even another model has been set for field', () => {
 
       scope.model = {foo: 'bar', child: {fox: 'jumps'}}

src/directives/formly-form.js

@@ -290,7 +290,7 @@ function formlyForm(formlyUsability, formlyWarn, $parse, formlyConfig, $interpol
     }
 
     function getWatchExpression(watcher, field, index) {
-      let watchExpression = watcher.expression || `model['${field.key}']`
+      let watchExpression = watcher.expression || '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