improving error message control

digitalspace · Feb 9, 2024 · 575bd78 · 575bd78
1 parent de61147
commit 575bd78
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 67 deletions.
diff --git a/...ds-forms/src/lib/components/input-addons/ngds-input-footer/ngds-input-footer.component.ts b/...ds-forms/src/lib/components/input-addons/ngds-input-footer/ngds-input-footer.component.ts
@@ -1,80 +1,54 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+
+export interface invalidConfig {
+  showMessage?: boolean,
+  messages?: {
+    default?: string
+    required?: string,
+    requiredTrue?: string,
+    min?: string,
+    max?: string,
+    minlength?: string,
+    maxlength?: string
+  }
+}
 
 @Component({
   selector: 'ngds-input-footer',
   templateUrl: './ngds-input-footer.component.html',
   styleUrls: ['../../../../../assets/styles/styles.scss']
 })
-export class NgdsInputFooter {
+export class NgdsInputFooter implements OnInit {
   @Input() control: any;
   @Input() invalid: boolean = false;
-  @Input() invalidFieldMsgDefault: string = 'This field requires attention.';
-  @Input() invalidFieldMsgRequired: string = 'This field is required.';
-  @Input() invalidFieldMsgRequiredTrue: string = 'This field is required to be &quot;true&quot;.';
-  @Input() invalidFieldMsgMin: string = '';
-  @Input() invalidFieldMsgMax: string = '';
-  @Input() invalidFieldMsgMinLength: string = '';
-  @Input() invalidFieldMsgMaxLength: string = '';
-  @Input() showMsgWhenInvalid: boolean = true;
+  @Input() config: invalidConfig;
 
-  // If the control is invalid, show the message.
-  isShowInvalid() {
-    if (this.showMsgWhenInvalid) {
-      return this.control?.invalid && this.control?.touched;
+  public defaultConfig: invalidConfig = {
+    showMessage: true,
+    messages: {
+      default: 'This field requires attention.',
+      required: 'This field is required.',
+      requiredTrue: 'This field is required to be &quot;true&quot;.',
+      min: 'The value of this field is too small.',
+      max: 'The value of this field is too large.',
+      minlength: 'This field is too short.',
+      maxlength: 'This field is too long.'
     }
-    return false;
+  }
+
+  ngOnInit(): void {
+    this.config = {...this.defaultConfig, ...this.config};
   }
 
   getInvalidMsg() {
     // To avoid a crowded UI, only return the first error if there are multiple.
-    if (this.control?.errors) {
+    if (this.control?.errors && this.config.showMessage) {
       let firstErrorKey = Object.keys(this.control.errors)[0];
-      switch (firstErrorKey) {
-        case 'required':
-          return this.invalidFieldMsgRequired;
-        case 'requiredTrue':
-          return this.invalidFieldMsgRequiredTrue;
-        case 'min':
-          if (this.invalidFieldMsgMin) {
-            return this.invalidFieldMsgMin;
-          } else if (this.control.errors[firstErrorKey].min) {
-            return `The minimum value of this field can be no less than ${this.control.errors[firstErrorKey].min}.`
-          }
-          break;
-        case 'max':
-          if (this.invalidFieldMsgMax) {
-            return this.invalidFieldMsgMax;
-          } else if (this.control.errors[firstErrorKey].max) {
-            return `The maximum value of this field can be no more than ${this.control.errors[firstErrorKey].max}.`
-          }
-          break;
-        case 'minlength':
-          if (this.invalidFieldMsgMinLength) {
-            return this.invalidFieldMsgMinLength
-          } else if (this.control.errors.minlength.requiredLength) {
-            if (this.control.errors.minlength.requiredLength) {
-              return `This field must be at least ${this.control.errors.minlength.requiredLength} characters in length.`;
-            } else {
-              return `This field has too few characters.`;
-            }
-          }
-          break;
-        case 'maxlength':
-          if (this.invalidFieldMsgMaxLength) {
-            return this.invalidFieldMsgMaxLength;
-          } else {
-            if (this.control.errors.maxlength.requiredLength) {
-              return `This field must be at most ${this.control.errors.maxlength.requiredLength} characters in length.`;
-            } else {
-              return `This field has too many characters.`;
-            }
-          }
-        default:
-          if (this.control.errors[firstErrorKey]) {
-            return this.control.errors[firstErrorKey]
-          }
-          return this.invalidFieldMsgDefault
+      let message = this.control.errors[firstErrorKey];
+      if (!message || Object.keys(message).length > 0) {
+        message = this.config.messages[firstErrorKey] || this.config.messages.default;
       }
+      return message;
     }
   }
 

diff --git a/projects/ngds-forms/src/lib/components/input-types/date-input/date-input.component.html b/projects/ngds-forms/src/lib/components/input-types/date-input/date-input.component.html
@@ -38,7 +38,7 @@
 </div>
 
 <!-- Footer -->
-<ngds-input-footer #inputFooter [control]="control" [invalid]="isInvalid && !hideInvalidState"></ngds-input-footer>
+<ngds-input-footer #inputFooter [control]="control" [invalid]="isInvalid && !hideInvalidState" [config]="invalidConfig"></ngds-input-footer>
 
 <!-- Calendar inline -->
 <div *ngIf="inline">

diff --git a/projects/ngds-forms/src/lib/components/input-types/ngds-input.component.ts b/projects/ngds-forms/src/lib/components/input-types/ngds-input.component.ts
@@ -1,6 +1,7 @@
 import { Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, TemplateRef, ViewChild, } from '@angular/core';
 import { BehaviorSubject, Subject, Subscription, takeUntil } from 'rxjs';
 import { Validators } from '@angular/forms';
+import { invalidConfig } from '../input-addons/ngds-input-footer/ngds-input-footer.component' 
 
 import { SelectionItemSchema } from '../../form-models';
 
@@ -50,6 +51,9 @@ export class NgdsInput implements OnInit, OnDestroy {
   // start, end, or center
   @Input() justify: string = 'start';
 
+  // Configure invalid messages
+  @Input() invalidConfig: invalidConfig;
+
   // The list of available options in a picklist or typeahead. Provide options as either a basic array, or an array of type selectionItemSchema for more custom options.
   private _selectionListItems = new BehaviorSubject<any>([]);
   @Input() set selectionListItems(items: any[] | SelectionItemSchema[]) {

diff --git a/projects/ngds-forms/src/lib/components/input-types/number-input/number-input.component.html b/projects/ngds-forms/src/lib/components/input-types/number-input/number-input.component.html
@@ -44,4 +44,4 @@
 </div>
 
 <!-- Footer -->
-<ngds-input-footer #inputFooter [control]="control" [invalid]="isInvalid && !hideInvalidState"></ngds-input-footer>
+<ngds-input-footer #inputFooter [control]="control" [invalid]="isInvalid && !hideInvalidState" [config]="invalidConfig"></ngds-input-footer>
diff --git a/...ts/ngds-forms/src/lib/components/input-types/picklist-input/picklist-input.component.html b/...ts/ngds-forms/src/lib/components/input-types/picklist-input/picklist-input.component.html
@@ -56,4 +56,4 @@
 </div>
 
 <!-- Footer -->
-<ngds-input-footer #inputFooter [control]="control" [invalid]="isInvalid && !hideInvalidState"></ngds-input-footer>
+<ngds-input-footer #inputFooter [control]="control" [invalid]="isInvalid && !hideInvalidState" [config]="invalidConfig"></ngds-input-footer>
diff --git a/projects/ngds-forms/src/lib/components/input-types/text-input/text-input.component.html b/projects/ngds-forms/src/lib/components/input-types/text-input/text-input.component.html
@@ -28,4 +28,4 @@
 </div>
 
 <!-- Footer -->
-<ngds-input-footer #inputFooter [control]="control" [invalid]="isInvalid && !hideInvalidState"></ngds-input-footer>
+<ngds-input-footer #inputFooter [control]="control" [invalid]="isInvalid && !hideInvalidState" [config]="invalidConfig"></ngds-input-footer>
diff --git a/projects/ngds-forms/src/lib/components/input-types/toggle-input/toggle-input.component.html b/projects/ngds-forms/src/lib/components/input-types/toggle-input/toggle-input.component.html
@@ -24,4 +24,4 @@
 </div>
 
 <!-- Footer -->
-<ngds-input-footer #inputFooter [control]="control" [invalid]="isInvalid && !hideInvalidState" ></ngds-input-footer>
+<ngds-input-footer #inputFooter [control]="control" [invalid]="isInvalid && !hideInvalidState" [config]="invalidConfig" ></ngds-input-footer>
diff --git a/.../ngds-forms/src/lib/components/input-types/typeahead-input/typeahead-input.component.html b/.../ngds-forms/src/lib/components/input-types/typeahead-input/typeahead-input.component.html
@@ -52,7 +52,7 @@
 </div>
 
 <!-- Footer -->
-<ngds-input-footer #inputFooter [control]="control" [invalid]="isInvalid && !hideInvalidState"></ngds-input-footer>
+<ngds-input-footer #inputFooter [control]="control" [invalid]="isInvalid && !hideInvalidState" [config]="invalidConfig"></ngds-input-footer>
 
 <!-- Default dropdown picklist template -->
 <ng-template #defaultListTemplate let-matches="matches" let-query="query" let-typeaheadTemplateMethods>