fix(#514): avoid supress and/or force validation messages. (#524)

Author: aitboudad

demo/src/formly/index.ts

@@ -40,7 +40,7 @@ export const NgFormlyConfig: ConfigOption = {
   ],
   extras: {
     showError: (field: Field) => {
-      return (field.formState.submitted || field.formControl.touched) && !field.formControl.valid;
+      return (field.formState.submitted || field.formControl.touched || (field.field.validation && field.field.validation.show)) && !field.formControl.valid;
     },
   },
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngx-formly/platform",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.3",
   "author": "Zama Khan Mohammed <mohammedzamakhan@gmail.com>",
   "contributors": [
     "Zama Khan Mohammed <mohammedzamakhan@gmail.com>",

src/core/src/components/formly.field.ts

@@ -213,12 +213,6 @@ export class FormlyField implements DoCheck, OnInit, OnDestroy {
         if (formControl.status !== 'DISABLED' && this.field.templateOptions.disabled) {
             formControl.disable();
         }
-        if (!formControl.dirty && formControl.invalid && this.field.validation && !this.field.validation.show) {
-          formControl.markAsUntouched();
-        }
-        if (!formControl.dirty && formControl.invalid && this.field.validation && this.field.validation.show) {
-          formControl.markAsTouched();
-        }
       }
     }
   }

src/core/src/services/formly.config.ts

@@ -34,7 +34,7 @@ export class FormlyConfig {
   } = {
     fieldTransform: undefined,
     showError: function(field: Field) {
-      return field.formControl.touched && !field.formControl.valid;
+      return (field.formControl.touched || (field.field.validation && field.field.validation.show)) && !field.formControl.valid;
     },
   };
 

src/core/src/services/formly.form.builder.spec.ts

@@ -199,17 +199,19 @@ describe('FormlyFormBuilder service', () => {
       it('should show error when option `show` is true', () => {
         field.validators = { validation: ['required'] };
         field.validation = { show: true };
-        builder.buildForm(form, [field], {}, {});
+        const options: any = {};
+        builder.buildForm(form, [field], {}, options);
 
-        expect(form.get('title').touched).toBeTruthy();
+        expect(options.showError({ field: field, formControl: form })).toBeTruthy();
       });
 
       it('should not show error when option `show` is false', () => {
         field.validators = { validation: ['required'] };
         field.validation = { show: false };
-        builder.buildForm(form, [field], {}, {});
+        const options: any = {};
+        builder.buildForm(form, [field], {}, options);
 
-        expect(form.get('title').touched).toBeFalsy();
+        expect(options.showError({ field: field, formControl: form })).toBeFalsy();
       });
     });
 

src/core/src/services/formly.form.builder.ts

@@ -261,9 +261,6 @@ export class FormlyFormBuilder {
     }
 
     this.addControl(form, name, formControl, field);
-    if (field.validation && field.validation.show) {
-      form.get(field.key).markAsTouched();
-    }
   }
 
   private getValidation(opt, value) {