Adding support for field.extras.validateOnModelChange

Author: Kent C. Dodds

CHANGELOG.md

@@ -1,3 +1,19 @@
+# 6.22.0
+
+## New Features
+
+- Adding `extras` property to the field configuration object (for configuration of angular-formly core features).
+- Adding support for `field.extras.validateOnModelChange` which will invoke the field's `formControl.$validate` function when the model or formState changes. [#404](/../../issues/404)
+
+## Bug Fixes
+
+- `hideExpressions` now run on both the field's own model change (if present) as well as the form's model's change and formState change. Thanks [@redhead](https://github.com/redhead)! [#380](/../../issues/380)
+
+## Internal enhancements
+
+- Adding test for the presence all the things that get added to the field configuration object
+- Adding test for the presence all the things that should be available on the scope of a formly-field (and hence available to template authors).
+
 # 6.21.1
 
 ## Bug Fixes

src/directives/formly-field.js

@@ -84,6 +84,7 @@ function formlyField($http, $q, $compile, $templateCache, $interpolate, formlyCo
     function simplifyLife(options) {
       // add a few empty objects (if they don't already exist) so you don't have to undefined check everywhere
       formlyUtil.reverseDeepMerge(options, {
+        extras: {},
         data: {},
         templateOptions: {},
         validation: {}

src/directives/formly-field.test.js

@@ -1569,6 +1569,19 @@ describe('formly-field', function() {
     });
   });
 
+  describe(`extras`, () => {
+    describe(`validateOnModelChange`, () => {
+      it(`should invoke $validate on the field even when the field's model hasn't changed`, () => {
+        scope.fields = [getNewField({extras: {validateOnModelChange: true}})];
+        compileAndDigest();
+        const $validateSpy = sinon.spy(field.formControl, '$validate');
+        scope.model.foo = 'bar';
+        scope.$digest();
+        expect($validateSpy).to.have.been.calledOnce;
+      });
+    });
+  });
+
   describe(`other things`, () => {
     it(`should warn if you specify 'hide' in expressionProperties`, inject(($log) => {
       scope.fields = [getNewField({expressionProperties: {hide: 'foo'}})];
@@ -1581,6 +1594,26 @@ describe('formly-field', function() {
       );
       expect(log[2]).to.equal(field);
     }));
+
+    it(`should add a bunch of things to the formly field and it's scope`, () => {
+      scope.fields = [{template: '<input ng-model="model[options.key]" />'}];
+      compileAndDigest();
+      // here's a list of everything that angular-formly adds for you.
+      expect(field).to.contain.all.keys([
+        'key', 'extras', 'data', 'templateOptions', 'validation', 'value', 'runExpressions',
+        'resetModel', 'updateInitialValue', 'id', 'name', 'initialValue', 'formControl'
+      ]);
+    });
+
+    it(`should add a bunch of things to the formly field and it's scope`, () => {
+      scope.fields = [{template: '<input ng-model="model[options.key]" />'}];
+      compileAndDigest();
+      // here's a list of everything that you have available on the scope for your templates
+      expect(isolateScope).to.contain.all.keys([
+        'options', 'model', 'formId', 'index', 'fields', 'formState', 'formOptions',
+        'form', 'id', 'to', 'fc', 'name', 'showError'
+      ]);
+    });
   });
 
   describe(`merging of options`, () => {

src/directives/formly-form.js

@@ -118,13 +118,15 @@ function formlyForm(formlyUsability, formlyWarn, $parse, formlyConfig, $interpol
 
     function onModelOrFormStateChange() {
       angular.forEach($scope.fields, function runFieldExpressionProperties(field, index) {
-        /*jshint -W030 */
         const model = field.model || $scope.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);
         }
+        if (field.extras && field.extras.validateOnModelChange && field.formControl) {
+          field.formControl.$validate();
+        }
       });
     }
 

src/providers/formlyApiCheck.js

@@ -102,6 +102,9 @@ const fieldOptionsApiShape = {
   id: apiCheck.string.optional,
   name: apiCheck.string.optional,
   expressionProperties: expressionProperties.optional,
+  extras: apiCheck.shape({
+    validateOnModelChange: apiCheck.bool.optional
+  }).strict.optional,
   data: apiCheck.object.optional,
   templateOptions: apiCheck.object.optional,
   wrapper: specifyWrapperType.optional,