perf(formly-form): Add optimization for braket property selector on model & formState

If you're specifying a  that starts with  or  then we don't need another
watcher because we're already deep watching these objects

closes #439

Author: Kent C. Dodds

src/directives/formly-form.js

@@ -209,9 +209,7 @@ function formlyForm(formlyUsability, formlyWarn, $parse, formlyConfig, $interpol
         const expression = field.model;
         const index = $scope.fields.indexOf(field);
 
-        if (formlyUtil.startsWith(expression, 'model.') || formlyUtil.startsWith(expression, 'formState.')) {
-          isNewModel = false;
-        }
+        isNewModel = !refrencesCurrentlyWatchedModel(expression);
 
         field.model = evalCloseToFormlyExpression(expression, undefined, field, index);
         if (!field.model) {
@@ -225,6 +223,12 @@ function formlyForm(formlyUsability, formlyWarn, $parse, formlyConfig, $interpol
       return isNewModel;
     }
 
+    function refrencesCurrentlyWatchedModel(expression) {
+      return ['model', 'formState'].some(item => {
+        return formlyUtil.startsWith(expression, `${item}.`) || formlyUtil.startsWith(expression, `${item}[`);
+      });
+    }
+
     function attachKey(field, index) {
       if (!isFieldGroup(field)) {
         field.key = field.key || index || 0;

src/directives/formly-form.test.js

@@ -430,7 +430,23 @@ describe('formly-form', () => {
     });
 
     it('starting with "model." should be assigned with only one watcher', () => {
-      scope.fields[0].model = 'model.nested';
+      testModelAccessor('model.nested');
+    });
+
+    it('starting with "model[" should be assigned with only one watcher', () => {
+      testModelAccessor('model["nested"]');
+    });
+
+    it('starting with "formState." should be assigned with only one watcher', () => {
+      testFormStateAccessor('formState.nested');
+    });
+
+    it('starting with "formState[" should be assigned with only one watcher', () => {
+      testFormStateAccessor('formState["nested"]');
+    });
+
+    function testModelAccessor(accessor) {
+      scope.fields[0].model = accessor;
 
       compileAndDigest();
       $timeout.flush();
@@ -442,16 +458,16 @@ describe('formly-form', () => {
       $timeout.flush();
 
       expect(spy).to.have.been.calledOnce;
-    });
+    }
 
-    it('starting with "formState." should be assigned with only one watcher', () => {
+    function testFormStateAccessor(accessor) {
       const formWithOptions = '<formly-form model="model" fields="fields" options="options"></formly-form>';
       scope.options = {
         formState: {
           nested: {}
         }
       };
-      scope.fields[0].model = 'formState.nested';
+      scope.fields[0].model = accessor;
 
       compileAndDigest(formWithOptions);
       $timeout.flush();
@@ -463,7 +479,7 @@ describe('formly-form', () => {
       $timeout.flush();
 
       expect(spy).to.have.been.calledOnce;
-    });
+    }
   });
 
   describe('hideExpression', () => {