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 @@
-