Skip to content

Commit

Permalink
feat: add a custom description to the textarea description wrapper
Browse files Browse the repository at this point in the history
  • Loading branch information
@SGrueber
SGrueber committed Jun 16, 2022
1 parent 97761e7 commit b67d14d
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 10 deletions.
18 changes: 9 additions & 9 deletions docs/guides/formly.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<div>` |
| 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 `<div>` |
| 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 `<ish-field-tooltip>` 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<string>; }, addonRight?: {text: string \| Observable<string>}` 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 `<div>` |
| 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 `<div>` |
| 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 `<ish-field-tooltip>` 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<string>; }, addonRight?: {text: string \| Observable<string>}` that defines the addon texts. |

### Extensions

Expand Down
6 changes: 5 additions & 1 deletion ...ed/formly/wrappers/textarea-description-wrapper/textarea-description-wrapper.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)),
});
}
Expand Down

0 comments on commit b67d14d

Please sign in to comment.