fix(core): update form validity when changing built-in validations (#…

…1887) fix #1493
ngx-formly · Oct 30, 2019 · fb8485d · fb8485d
1 parent 73f0316
commit fb8485d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 17 deletions.
diff --git a/src/core/src/lib/extensions/field-expression/field-expression.ts b/src/core/src/lib/extensions/field-expression/field-expression.ts
@@ -1,5 +1,5 @@
 import { FormlyFieldConfig, FormlyValueChangeEvent, FormlyFieldConfigCache } from '../../components/formly.field.config';
-import { isObject, isNullOrUndefined, isFunction, FORMLY_VALIDATORS, defineHiddenProp } from '../../utils';
+import { isObject, isNullOrUndefined, isFunction, defineHiddenProp } from '../../utils';
 import { evalExpression, evalStringExpression, evalExpressionValueSetter } from './utils';
 import { Observable } from 'rxjs';
 import { FormlyExtension } from '../../services/formly.config';
@@ -136,7 +136,6 @@ export class FieldExpressionExtension implements FormlyExtension {
 
     let markForCheck = false;
     const expressionProperties = field._expressionProperties;
-    const validators = FORMLY_VALIDATORS.map(v => `templateOptions.${v}`);
 
     for (const key in expressionProperties) {
       let expressionValue = evalExpression(expressionProperties[key].expression, { field }, [field.model, field.options.formState, field]);
@@ -170,10 +169,6 @@ export class FieldExpressionExtension implements FormlyExtension {
             control.patchValue(expressionValue);
           }
         }
-
-        if (validators.indexOf(key) !== -1 && field.formControl) {
-          field.formControl.updateValueAndValidity({ emitEvent: false });
-        }
       }
     }
 

diff --git a/src/core/src/lib/extensions/field-form/field-form.ts b/src/core/src/lib/extensions/field-form/field-form.ts
@@ -27,7 +27,7 @@ export class FieldFormExtension implements FormlyExtension {
     }
 
     const updateValidity = this.setValidators(field);
-    updateValidity && (field.formControl as any)._updateTreeValidity();
+    updateValidity && (field.formControl as any)._updateTreeValidity({ emitEvent: false });
   }
 
   private addFormControl(field: FormlyFieldConfigCache) {

diff --git a/src/core/src/lib/extensions/field-validation/field-validation.ts b/src/core/src/lib/extensions/field-validation/field-validation.ts
@@ -1,7 +1,7 @@
 import { FormlyExtension, FieldValidatorFn, FormlyConfig } from '../../services/formly.config';
 import { FormlyFieldConfigCache } from '../../components/formly.field.config';
 import { AbstractControl, Validators, ValidatorFn } from '@angular/forms';
-import { isObject, FORMLY_VALIDATORS, defineHiddenProp, isUndefined, isPromise } from '../../utils';
+import { isObject, FORMLY_VALIDATORS, defineHiddenProp, isUndefined, isPromise, wrapProperty } from '../../utils';
 
 /** @experimental */
 export class FieldValidationExtension implements FormlyExtension {
@@ -29,7 +29,7 @@ export class FieldValidationExtension implements FormlyExtension {
       return;
     }
 
-    const validators: ValidatorFn[] = type === 'validators' ? this.getPredefinedFieldValidation(field) : [];
+    const validators: ValidatorFn[] = type === 'validators' ? [this.getPredefinedFieldValidation(field)] : [];
     if (field[type]) {
       for (const validatorName in field[type]) {
         if (validatorName === 'validation' && !Array.isArray(field[type].validation)) {
@@ -51,14 +51,25 @@ export class FieldValidationExtension implements FormlyExtension {
     );
   }
 
-  private getPredefinedFieldValidation(field: FormlyFieldConfigCache): ValidatorFn[] {
-    return FORMLY_VALIDATORS
-      .filter(opt => (field.templateOptions && field.templateOptions.hasOwnProperty(opt)) || (field.expressionProperties && field.expressionProperties[`templateOptions.${opt}`]))
-      .map((opt) => (control: AbstractControl) => {
+  private getPredefinedFieldValidation(field: FormlyFieldConfigCache): ValidatorFn {
+    let VALIDATORS = [];
+    FORMLY_VALIDATORS.forEach(opt => wrapProperty(field.templateOptions, opt, (value, oldValue) => {
+      VALIDATORS = VALIDATORS.filter(o => o !== opt);
+      if (value != null && value !== false) {
+        VALIDATORS.push(opt);
+      }
+      if (value !== oldValue && field.formControl) {
+        field.formControl.updateValueAndValidity({ emitEvent: false });
+      }
+    }));
+
+    return (control: AbstractControl) => {
+      if (VALIDATORS.length === 0) {
+        return null;
+      }
+
+      return Validators.compose(VALIDATORS.map(opt => () => {
         const value = field.templateOptions[opt];
-        if (value === false) {
-          return null;
-        }
         switch (opt) {
           case 'required':
             return Validators.required(control);
@@ -73,7 +84,8 @@ export class FieldValidationExtension implements FormlyExtension {
           case 'max':
             return Validators.max(value)(control);
         }
-      });
+      }))(control);
+    };
   }
 
   private wrapNgValidatorFn(field: FormlyFieldConfigCache, validator: string | FieldValidatorFn, validatorName?: string) {

diff --git a/src/core/src/lib/services/formly.form.builder.spec.ts b/src/core/src/lib/services/formly.form.builder.spec.ts
@@ -669,6 +669,15 @@ describe('FormlyFormBuilder service', () => {
         });
       });
     });
+
+    it(`should take account of built-in validator changes`, () => {
+      field.templateOptions = {};
+      builder.buildForm(form, [field], {}, {});
+      expect(field.formControl.valid).toBeTruthy();
+
+      field.templateOptions.required = true;
+      expect(field.formControl.valid).toBeFalsy();
+    });
   });
 
   describe('fieldArray', () => {