feat: provide option to disable the automatic translation of formly s…

…elect field options * translation can be disabled with `props.optionsTranslateDisabled: true` in `ish-select-field` configuration
intershop · Jan 13, 2025 · 31c92bc · 31c92bc
1 parent 3e25a58
commit 31c92bc
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git 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`: `<string \| { wrapper: string, index: number}>[]` 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`: `<string \| { wrapper: string, index: number}>[]` 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
@@ -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) }
+          )
+        )
       ),
     };
   }