From 575bd78834f5bbf088998288d3e28cc25b93580a Mon Sep 17 00:00:00 2001 From: cameron Date: Fri, 9 Feb 2024 00:53:33 +0000 Subject: [PATCH] improving error message control --- .../ngds-input-footer.component.ts | 96 +++++++------------ .../date-input/date-input.component.html | 2 +- .../input-types/ngds-input.component.ts | 4 + .../number-input/number-input.component.html | 2 +- .../picklist-input.component.html | 2 +- .../text-input/text-input.component.html | 2 +- .../toggle-input/toggle-input.component.html | 2 +- .../typeahead-input.component.html | 2 +- 8 files changed, 45 insertions(+), 67 deletions(-) diff --git a/projects/ngds-forms/src/lib/components/input-addons/ngds-input-footer/ngds-input-footer.component.ts b/projects/ngds-forms/src/lib/components/input-addons/ngds-input-footer/ngds-input-footer.component.ts index 390ccf1..eefbbe5 100644 --- a/projects/ngds-forms/src/lib/components/input-addons/ngds-input-footer/ngds-input-footer.component.ts +++ b/projects/ngds-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 "true".'; - @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 "true".', + 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 index 9228a31..e8f7a99 100644 --- 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 @@ - +
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 index 491ff0e..3256215 100644 --- 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([]); @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 index 84dbc5e..20d658d 100644 --- 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 @@
- \ No newline at end of file + \ No newline at end of file diff --git a/projects/ngds-forms/src/lib/components/input-types/picklist-input/picklist-input.component.html b/projects/ngds-forms/src/lib/components/input-types/picklist-input/picklist-input.component.html index 7ed021f..fb5dd80 100644 --- a/projects/ngds-forms/src/lib/components/input-types/picklist-input/picklist-input.component.html +++ b/projects/ngds-forms/src/lib/components/input-types/picklist-input/picklist-input.component.html @@ -56,4 +56,4 @@ - \ No newline at end of file + \ No newline at end of file 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 index 615a9de..88a440b 100644 --- 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 @@ - \ No newline at end of file + \ No newline at end of file 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 index f9309b1..d429ba5 100644 --- 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 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/projects/ngds-forms/src/lib/components/input-types/typeahead-input/typeahead-input.component.html b/projects/ngds-forms/src/lib/components/input-types/typeahead-input/typeahead-input.component.html index 232d363..aac8c53 100644 --- a/projects/ngds-forms/src/lib/components/input-types/typeahead-input/typeahead-input.component.html +++ b/projects/ngds-forms/src/lib/components/input-types/typeahead-input/typeahead-input.component.html @@ -52,7 +52,7 @@ - +