diff --git a/packages/uui-input/lib/uui-input.element.ts b/packages/uui-input/lib/uui-input.element.ts index d585f0776..0ed308f48 100644 --- a/packages/uui-input/lib/uui-input.element.ts +++ b/packages/uui-input/lib/uui-input.element.ts @@ -84,8 +84,9 @@ export class UUIInputElement extends UUIFormControlMixin( * @attr minlength-message * @default */ - @property({ type: String, attribute: 'minlength-message' }) - minlengthMessage = 'This field need more characters'; + @property({ attribute: 'minlength-message' }) + minlengthMessage: string | ((charsLeft: number) => string) = charsLeft => + `${charsLeft} characters left`; /** * Sets the max value of the input. @@ -111,8 +112,11 @@ export class UUIInputElement extends UUIFormControlMixin( * @attr maxlength-message * @default */ - @property({ type: String, attribute: 'maxlength-message' }) - maxlengthMessage = 'This field exceeds the allowed amount of characters'; + @property({ attribute: 'maxlength-message' }) + maxlengthMessage: string | ((max: number, current: number) => string) = ( + max, + current, + ) => `Maximum length exceeded (${current}/${max} characters)`; /** * Specifies the interval between legal numbers of the input @@ -216,12 +220,26 @@ export class UUIInputElement extends UUIFormControlMixin( this.addValidator( 'tooShort', - () => this.minlengthMessage, + () => { + const label = this.minlengthMessage; + if (typeof label === 'function') { + return label( + this.minlength ? this.minlength - String(this.value).length : 0, + ); + } + return label; + }, () => !!this.minlength && String(this.value).length < this.minlength, ); this.addValidator( 'tooLong', - () => this.maxlengthMessage, + () => { + const label = this.maxlengthMessage; + if (typeof label === 'function') { + return label(this.maxlength ?? 0, String(this.value).length); + } + return label; + }, () => !!this.maxlength && String(this.value).length > this.maxlength, ); diff --git a/packages/uui-textarea/lib/uui-textarea.element.ts b/packages/uui-textarea/lib/uui-textarea.element.ts index b457fe9f1..9f11a7825 100644 --- a/packages/uui-textarea/lib/uui-textarea.element.ts +++ b/packages/uui-textarea/lib/uui-textarea.element.ts @@ -81,13 +81,12 @@ export class UUITextareaElement extends UUIFormControlMixin(LitElement, '') { /** * Minlength validation message. - * @type {boolean} * @attr * @default */ - @property({ type: String, attribute: 'minlength-message' }) - minlengthMessage = 'This field need more characters'; - + @property({ attribute: 'minlength-message' }) + minlengthMessage: string | ((charsLeft: number) => string) = charsLeft => + `${charsLeft} characters left`; /** * This is a maximum value of the input. * @type {number} @@ -99,12 +98,14 @@ export class UUITextareaElement extends UUIFormControlMixin(LitElement, '') { /** * Maxlength validation message. - * @type {boolean} * @attr * @default */ - @property({ type: String, attribute: 'maxlength-message' }) - maxlengthMessage = 'This field exceeds the allowed amount of characters'; + @property({ attribute: 'maxlength-message' }) + maxlengthMessage: string | ((max: number, current: number) => string) = ( + max, + current, + ) => `Maximum ${max} characters, ${current} too many.`; @query('#textarea') protected _textarea!: HTMLInputElement; @@ -163,12 +164,26 @@ export class UUITextareaElement extends UUIFormControlMixin(LitElement, '') { this.addValidator( 'tooShort', - () => this.minlengthMessage, + () => { + const label = this.minlengthMessage; + if (typeof label === 'function') { + return label( + this.minlength ? this.minlength - String(this.value).length : 0, + ); + } + return label; + }, () => !!this.minlength && (this.value as string).length < this.minlength, ); this.addValidator( 'tooLong', - () => this.maxlengthMessage, + () => { + const label = this.maxlengthMessage; + if (typeof label === 'function') { + return label(this.maxlength ?? 0, String(this.value).length); + } + return label; + }, () => !!this.maxlength && (this.value as string).length > this.maxlength, ); }