error validation messaging working in Foundation and Bootstrap compon…

…ents (# 153)
udos86 · Oct 23, 2016 · 94ee42b · DavyJohnes · Oct 24, 2016 · udos86
1 parent d971e43
commit 94ee42b
Show file tree

Hide file tree

Showing 12 changed files with 37 additions and 15 deletions.
diff --git a/example/app/bootstrap/bootstrap-example.component.html b/example/app/bootstrap/bootstrap-example.component.html
@@ -5,8 +5,7 @@
         <dynamic-form-bootstrap-control *ngFor="let controlModel of dynamicFormModel"
                                         [controlGroup]="form"
                                         [model]="controlModel"
-                                        (blur)="onBlur($event)"
-                                        (focus)="onFocus($event)">
+                                        [enableErrorMessaging]="!!controlModel.errorMessages">
 
             <template let-context="context" let-index="index">
 

diff --git a/example/app/bootstrap/bootstrap-example.model.ts b/example/app/bootstrap/bootstrap-example.model.ts
@@ -62,14 +62,18 @@ export const BOOTSTRAP_EXAMPLE_MODEL = [
                     placeholder: "example input",
                     prefix: "Prefix",
                     suffix: "Suffix",
-                    validators: [Validators.required]
+                    validators: [Validators.required],
+                    errorMessages: {
+                        required: "{{label}} is required"
+                    }
                 },
                 {
                     element: {
                         label: "control-label"
                     },
                     grid: {
                         control: "col-sm-9",
+                        errors: "col-sm-offset-3 col-sm-9",
                         label: "col-sm-3"
                     }
                 }

diff --git a/example/app/foundation/foundation-example.model.ts b/example/app/foundation/foundation-example.model.ts
@@ -102,11 +102,11 @@ export const FOUNDATION_EXAMPLE_MODEL = [
         {
             element: {
                 container: "row",
-                label: "text-right middle font-bold",
-                error: "small-9 small-offset-3 columns"
+                label: "text-right middle font-bold"
             },
             grid: {
                 control: "small-9 columns",
+                errors: "small-9 small-offset-3 columns",
                 label: "small-3 columns"
             }
         }
@@ -158,11 +158,11 @@ export const FOUNDATION_EXAMPLE_MODEL = [
         {
             element: {
                 container: "row",
-                label: "text-right font-bold",
-                error: "small-9 small-offset-3 columns"
+                label: "text-right font-bold"
             },
             grid: {
                 control: "small-9 columns",
+                errors: "small-9 small-offset-3 columns",
                 label: "small-3 columns"
             }
         }

diff --git a/modules/core/src/model/dynamic-form-control.model.ts b/modules/core/src/model/dynamic-form-control.model.ts
@@ -7,8 +7,8 @@ export interface Cls {
 
     container?: string;
     control?: string;
+    errors?: string;
     label?: string;
-    error?: string;
 }
 
 export interface ClsConfig {
@@ -43,8 +43,8 @@ export abstract class DynamicFormControlModel {
             throw new Error("string id must be specified for DynamicFormControlModel");
         }
 
-        this.cls.element = getValue(cls, "element", {container: "", control: "", label: ""});
-        this.cls.grid = getValue(cls, "grid", {container: "", control: "", label: ""});
+        this.cls.element = getValue(cls, "element", {container: "", control: "", errors: "", label: ""});
+        this.cls.grid = getValue(cls, "grid", {container: "", control: "", errors: "", label: ""});
 
         this._disabled = getValue(config, "disabled", false);
         this.id = config.id;

diff --git a/modules/ui-basic/src/dynamic-form-basic.component.spec.ts b/modules/ui-basic/src/dynamic-form-basic.component.spec.ts
@@ -49,6 +49,7 @@ describe("DynamicFormBasicComponent test suite", () => {
         expect(component.control instanceof FormControl).toBe(true);
         expect(component.controlGroup instanceof FormGroup).toBe(true);
         expect(component.model instanceof DynamicFormControlModel).toBe(true);
+        expect(component.enableErrorMessaging).toBe(false);
 
         expect(component.onControlValueChanges).toBeDefined();
         expect(component.onModelDisabledUpdates).toBeDefined();
@@ -61,5 +62,6 @@ describe("DynamicFormBasicComponent test suite", () => {
         expect(component.isCheckboxGroup).toBe(false);
         expect(component.isRadioGroup).toBe(false);
         expect(component.isValid).toBe(true);
+        expect(component.isInvalid).toBe(false);
     });
 });
diff --git a/modules/ui-bootstrap/src/dynamic-form-bootstrap.component.html b/modules/ui-bootstrap/src/dynamic-form-bootstrap.component.html
@@ -1,6 +1,5 @@
 <div class="form-group"
-     [class.has-error]="hasErrorStyles && control.touched && !control.valid"
-     [class.has-success]="hasSuccessStyles && control.touched && control.valid"
+     [class.has-error]="enableErrorMessaging && !hasFocus && isInvalid"
      [formGroup]="controlGroup"
      [ngClass]="[model.cls.element.container, model.cls.grid.container]"
      [ngSwitch]="model.type">
@@ -48,6 +47,7 @@
                 <dynamic-form-bootstrap-control *ngFor="let controlModel of groupModel.group"
                                                 [bindId]="false"
                                                 [controlGroup]="control.at(idx)"
+                                                [enableErrorMessaging]="!!controlModel.errorMessages"
                                                 [model]="controlModel"
                                                 [nestedTemplate]="nestedTemplate"
                                                 (blur)="onBlur($event)"
@@ -71,6 +71,7 @@
 
             <dynamic-form-bootstrap-control *ngFor="let controlModel of model.group"
                                             [controlGroup]="control"
+                                            [enableErrorMessaging]="!!controlModel.errorMessages"
                                             [model]="controlModel"
                                             [nestedTemplate]="customTemplate"
                                             (blur)="onBlur($event)"
@@ -216,6 +217,14 @@
 
     </div>
 
+    <div *ngIf="enableErrorMessaging" class="has-error"
+         [class.hidden]="!control.touched || hasFocus || isValid"
+         [ngClass]="[model.cls.element.errors, model.cls.grid.errors]">
+
+        <span *ngFor="let message of errorMessages" class="help-block">{{message}}</span>
+
+    </div>
+
     <ng-content></ng-content>
 
 </div>
diff --git a/modules/ui-bootstrap/src/dynamic-form-bootstrap.component.spec.ts b/modules/ui-bootstrap/src/dynamic-form-bootstrap.component.spec.ts
@@ -49,6 +49,7 @@ describe("DynamicFormBootstrapComponent test suite", () => {
         expect(component.control instanceof FormControl).toBe(true);
         expect(component.controlGroup instanceof FormGroup).toBe(true);
         expect(component.model instanceof DynamicFormControlModel).toBe(true);
+        expect(component.enableErrorMessaging).toBe(false);
 
         expect(component.onControlValueChanges).toBeDefined();
         expect(component.onModelDisabledUpdates).toBeDefined();
@@ -62,5 +63,6 @@ describe("DynamicFormBootstrapComponent test suite", () => {
         expect(component.isCheckboxGroup).toBe(false);
         expect(component.isRadioGroup).toBe(false);
         expect(component.isValid).toBe(true);
+        expect(component.isInvalid).toBe(false);
     });
 });
diff --git a/modules/ui-bootstrap/src/dynamic-form-bootstrap.component.ts b/modules/ui-bootstrap/src/dynamic-form-bootstrap.component.ts
@@ -18,8 +18,6 @@ export class DynamicFormBootstrapComponent extends DynamicFormControlComponent {
     @Input() enableErrorMessaging: boolean = false;
     @Input() model: DynamicFormControlModel;
     @Input() nestedTemplate: TemplateRef<any>;
-    @Input() hasSuccessStyles: boolean = false;
-    @Input() hasErrorStyles: boolean = false;
 
     @Output() blur: EventEmitter<FocusEvent> = new EventEmitter<FocusEvent>();
 

diff --git a/modules/ui-foundation/src/dynamic-form-foundation-sites.component.html b/modules/ui-foundation/src/dynamic-form-foundation-sites.component.html
@@ -24,6 +24,7 @@
                 <dynamic-form-foundation-sites-control *ngFor="let controlModel of groupModel.group"
                                                        [bindId]="false"
                                                        [controlGroup]="control.at(idx)"
+                                                       [enableErrorMessaging]="!!controlModel.errorMessages"
                                                        [model]="controlModel"
                                                        [nestedTemplate]="nestedTemplate"
                                                        (blur)="onBlur($event)"
@@ -47,6 +48,7 @@
 
             <dynamic-form-foundation-sites-control *ngFor="let controlModel of model.group"
                                                    [controlGroup]="control"
+                                                   [enableErrorMessaging]="!!controlModel.errorMessages"
                                                    [model]="controlModel"
                                                    [nestedTemplate]="customTemplate"
                                                    (blur)="onBlur($event)"
@@ -201,7 +203,7 @@
 
     </div>
 
-    <div *ngIf="enableErrorMessaging" [ngClass]="model.cls.element.error">
+    <div *ngIf="enableErrorMessaging" [ngClass]="[model.cls.element.errors, model.cls.grid.errors]">
 
         <span *ngFor="let message of errorMessages" class="form-error"
               [class.is-visible]="!hasFocus && isInvalid">{{message}}</span>

diff --git a/modules/ui-foundation/src/dynamic-form-foundation-sites.component.spec.ts b/modules/ui-foundation/src/dynamic-form-foundation-sites.component.spec.ts
@@ -52,6 +52,7 @@ describe("DynamicFormFoundationSitesComponent test suite", () => {
         expect(component.control instanceof FormControl).toBe(true);
         expect(component.controlGroup instanceof FormGroup).toBe(true);
         expect(component.model instanceof DynamicFormControlModel).toBe(true);
+        expect(component.enableErrorMessaging).toBe(false);
 
         expect(component.onControlValueChanges).toBeDefined();
         expect(component.onModelDisabledUpdates).toBeDefined();
@@ -65,5 +66,6 @@ describe("DynamicFormFoundationSitesComponent test suite", () => {
         expect(component.isCheckboxGroup).toBe(false);
         expect(component.isRadioGroup).toBe(false);
         expect(component.isValid).toBe(true);
+        expect(component.isInvalid).toBe(false);
     });
 });
diff --git a/modules/ui-material/src/dynamic-form-material.component.spec.ts b/modules/ui-material/src/dynamic-form-material.component.spec.ts
@@ -51,6 +51,7 @@ describe("DynamicFormMaterialComponent test suite", () => {
         expect(component.control instanceof FormControl).toBe(true);
         expect(component.controlGroup instanceof FormGroup).toBe(true);
         expect(component.model instanceof DynamicFormControlModel).toBe(true);
+        expect(component.enableErrorMessaging).toBe(false);
 
         expect(component.onControlValueChanges).toBeDefined();
         expect(component.onModelDisabledUpdates).toBeDefined();
@@ -64,5 +65,6 @@ describe("DynamicFormMaterialComponent test suite", () => {
         expect(component.isCheckboxGroup).toBe(false);
         expect(component.isRadioGroup).toBe(false);
         expect(component.isValid).toBe(true);
+        expect(component.isInvalid).toBe(false);
     });
 });
diff --git a/modules/ui-primeng/src/dynamic-form-primeng.component.spec.ts b/modules/ui-primeng/src/dynamic-form-primeng.component.spec.ts
@@ -56,6 +56,7 @@ describe("DynamicFormPrimeNGComponent test suite", () => {
         expect(component.control instanceof FormControl).toBe(true);
         expect(component.controlGroup instanceof FormGroup).toBe(true);
         expect(component.model instanceof DynamicFormControlModel).toBe(true);
+        expect(component.enableErrorMessaging).toBe(false);
 
         expect(component.onControlValueChanges).toBeDefined();
         expect(component.onModelDisabledUpdates).toBeDefined();
@@ -69,5 +70,6 @@ describe("DynamicFormPrimeNGComponent test suite", () => {
         expect(component.isCheckboxGroup).toBe(false);
         expect(component.isRadioGroup).toBe(false);
         expect(component.isValid).toBe(true);
+        expect(component.isInvalid).toBe(false);
     });
 });