diff --git a/docs/guides/formly.md b/docs/guides/formly.md index f784fc371e..f6be476fde 100644 --- a/docs/guides/formly.md +++ b/docs/guides/formly.md @@ -285,9 +285,9 @@ Refer to the tables below for an overview of these parts. ### Extensions -| Name | Functionality | Relevant props | -| ------------------------ | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| hide-if-empty | Hides fields of type `ish-select-field` that have an empty `options` attribute. | `options`: used to determine emptiness. | -| translate-select-options | Automatically translates option labels and adds a placeholder option. | `options`: options whose labels will be translated. `placeholder`: used to determine whether to set placeholder and its text. | -| translate-placeholder | Automatically translates the placeholder value | `placeholder`: value to be translated. | -| post-wrappers | Appends wrappers to the default ones defined in the `FormlyModule` | `postWrappers`: `[]` of extensions to append to the default wrappers, optional index to specify at which position the wrapper should be inserted. | +| Name | Functionality | Relevant props | +| ------------------------ | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| hide-if-empty | Hides fields of type `ish-select-field` that have an empty `options` attribute. | `options`: used to determine emptiness. | +| translate-select-options | Automatically translates option labels and adds a placeholder option. | `options`: options whose labels will be translated. `placeholder`: used to determine whether to set placeholder and its text. `optionsTranslateDisabled`: disables options label translation (placeholder is still translated). | +| translate-placeholder | Automatically translates the placeholder value | `placeholder`: value to be translated. | +| post-wrappers | Appends wrappers to the default ones defined in the `FormlyModule` | `postWrappers`: `[]` of extensions to append to the default wrappers, optional index to specify at which position the wrapper should be inserted. | diff --git a/src/app/shared/formly/extensions/translate-select-options.extension.ts b/src/app/shared/formly/extensions/translate-select-options.extension.ts index 8139c5af27..809dbe9084 100644 --- a/src/app/shared/formly/extensions/translate-select-options.extension.ts +++ b/src/app/shared/formly/extensions/translate-select-options.extension.ts @@ -10,6 +10,7 @@ import { map, tap } from 'rxjs/operators'; * * `` { value: any; label: string}[]`` * * `` Observable<{ value: any; label: string}[]>`` * @props **placeholder** - is used to add a placeholder element. This will also be translated. + * @props **optionsTranslateDisabled** - disables options label translation (placeholder is still translated). * * @usageNotes * It will use the TranslateService to translate option labels. @@ -26,13 +27,21 @@ class TranslateSelectOptionsExtension implements FormlyExtension { field.expressions = { ...(field.expressions || {}), 'props.options': (isObservable(props.options) ? props.options : of(props.options)).pipe( - map(options => (props.placeholder ? [{ value: '', label: props.placeholder }] : []).concat(options ?? [])), + map(options => + (props.placeholder ? [{ value: '', label: this.translate.instant(props.placeholder) }] : []).concat( + options ?? [] + ) + ), tap(() => { if (props.placeholder && !field.formControl.value && !field.model[field.key as string]) { field.formControl.setValue(''); } }), - map(options => options?.map(option => ({ ...option, label: this.translate.instant(option.label) }))) + map(options => + options?.map(option => + props.optionsTranslateDisabled ? option : { ...option, label: this.translate.instant(option.label) } + ) + ) ), }; }