From b67d14df54c18e5b2c50a0393dbe4a545bcbf822 Mon Sep 17 00:00:00 2001 From: Silke Date: Fri, 10 Jun 2022 12:16:22 +0200 Subject: [PATCH] feat: add a custom description to the textarea description wrapper --- docs/guides/formly.md | 18 +++++++++--------- .../textarea-description-wrapper.component.ts | 6 +++++- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/docs/guides/formly.md b/docs/guides/formly.md index c7040c33e5..7c08466c67 100644 --- a/docs/guides/formly.md +++ b/docs/guides/formly.md @@ -270,15 +270,15 @@ Template option `inputClass`: These css class(es) will be added to all input/sel ### Wrappers -| Name | Functionality | Relevant templateOptions | -| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -| form-field-horizontal | Adds a label next to the field and adds red styling for invalid fields. | `labelClass`& `fieldClass`: Classes that will be added to the label or field `
` | -| form-field-checkbox-horizontal | Adds a label for a checkbox or radio field, adds red styling and error messages for invalid fields. Uses `validators.validation` and `validation.messages` properties. Adds a tooltip behind the label, see also tooltip-wrapper | `labelClass`& `fieldClass`: Classes that will be added to the label or the outer field `
` | -| validation | Adds validation icons and error messages to the field. Uses `validators.validation` and `validation.messages` properties. | `showValidation`: `(field: FormlyFieldConfig) => boolean`: optional, used to determine whether to show validation check marks | -| textarea-description | Adds a description to textarea fields, including the amount of remaining characters. | `maxLength`: Specifies the maximum length to be displayed in the message. | -| description | Adds a custom description to any field | `customDescription`: `string` or `{key: string; args: any}` that will be translated | -| tooltip | Adds a tooltip to a field. Includes `` component. | `tooltip`: `{ title?: string; text: string; link: string }` that defines the different tooltip texts. | -| input-addon | Adds a prepended or appended text to a field, e.g. a currency or unit. | `addonLeft?`: `{ text: string \| Observable; }, addonRight?: {text: string \| Observable}` that defines the addon texts. | +| Name | Functionality | Relevant templateOptions | +| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| form-field-horizontal | Adds a label next to the field and adds red styling for invalid fields. | `labelClass`& `fieldClass`: Classes that will be added to the label or field `
` | +| form-field-checkbox-horizontal | Adds a label for a checkbox or radio field, adds red styling and error messages for invalid fields. Uses `validators.validation` and `validation.messages` properties. Adds a tooltip behind the label, see also tooltip-wrapper | `labelClass`& `fieldClass`: Classes that will be added to the label or the outer field `
` | +| validation | Adds validation icons and error messages to the field. Uses `validators.validation` and `validation.messages` properties. | `showValidation`: `(field: FormlyFieldConfig) => boolean`: optional, used to determine whether to show validation check marks | +| textarea-description | Adds a description to textarea fields, including the amount of remaining characters. | `maxLength`: Specifies the maximum length to be displayed in the message. `customDescription`: translation key for the textarea description (default: 'textarea.max_limit' ) | +| description | Adds a custom description to any field | `customDescription`: `string` or `{key: string; args: any}` that will be translated | +| tooltip | Adds a tooltip to a field. Includes `` component. | `tooltip`: `{ title?: string; text: string; link: string }` that defines the different tooltip texts. | +| input-addon | Adds a prepended or appended text to a field, e.g. a currency or unit. | `addonLeft?`: `{ text: string \| Observable; }, addonRight?: {text: string \| Observable}` that defines the addon texts. | ### Extensions diff --git a/src/app/shared/formly/wrappers/textarea-description-wrapper/textarea-description-wrapper.component.ts b/src/app/shared/formly/wrappers/textarea-description-wrapper/textarea-description-wrapper.component.ts index e8cbfcad79..549aa14f80 100644 --- a/src/app/shared/formly/wrappers/textarea-description-wrapper/textarea-description-wrapper.component.ts +++ b/src/app/shared/formly/wrappers/textarea-description-wrapper/textarea-description-wrapper.component.ts @@ -32,8 +32,12 @@ export class TextareaDescriptionWrapperComponent extends FieldWrapper implements }); } + get description() { + return this.to.customDescription ?? 'textarea.max_limit'; + } + setDescription(value: string) { - this.description$ = this.translate.get('textarea.max_limit', { + this.description$ = this.translate.get(this.description, { 0: Math.max(0, this.to.maxLength - (value?.length ?? 0)), }); }