Skip to content

Commit

Permalink
feat: introduce labelNoTranslate and titleNoTranslate flag to pre…
Browse files Browse the repository at this point in the history 
…vent Formly field label translation

* available for `form-field-horizontal` and `form-field-checkbox-horizontal` Formly wrappers
* removed left over usage of `to.` access in Formly templates, used `props.` instead
* added documentation for new flags
  • Loading branch information
@shauke
shauke committed Jun 14, 2024
1 parent cb1366c commit 4428c56
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 13 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 @@ -273,15 +273,15 @@ Refer to the tables below for an overview of these parts.

### Wrappers

| Name | Functionality | Relevant props |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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. Adds a title for a checkbox, if provided. Uses `validators.validation` and `validation.messages` properties. Adds a tooltip behind the label, see also tooltip-wrapper | `labelClass`, `titleClass`& `fieldClass`: Classes that will be added to the label, title 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 |
| maxlength-description | Adds a description to textarea fields, including the amount of remaining characters (added to textarea by default, can be used for other fields as well). | `maxLength`: Specifies the maximum length to be displayed in the message (required). `maxLengthDescription`: translation key for the maxlength 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. |
| Name | Functionality | Relevant props |
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| form-field-horizontal | Adds a label next to the field, adds a `required` marker and adds red styling for invalid fields. | `labelClass` & `fieldClass`: Classes that will be added to the label or field `<div>`. `labelNoTranslate`: Prevents the label from being translated (e.g. if it is not a translation key). `hideRequiredMarker`: Hides the required marker while still validating a `required` field. |
| form-field-checkbox-horizontal | Adds a label for a checkbox or radio field, adds a `required` marker, adds red styling and error messages for invalid fields. Adds a title for a checkbox, if provided. Uses `validators.validation` and `validation.messages` properties. Adds a tooltip behind the label, see also tooltip-wrapper | `labelClass`, `titleClass` & `fieldClass`: Classes that will be added to the label, title or the outer field `<div>`. `labelNoTranslate`, `titleNoTranslate`: Prevents the label or title from being translated. . `hideRequiredMarker`: Hides the required marker while still validating a `required` 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 |
| maxlength-description | Adds a description to textarea fields, including the amount of remaining characters (added to textarea by default, can be used for other fields as well). | `maxLength`: Specifies the maximum length to be displayed in the message (required). `maxLengthDescription`: Translation key for the maxlength 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
5 changes: 3 additions & 2 deletions ...ed/formly/wrappers/horizontal-checkbox-wrapper/horizontal-checkbox-wrapper.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<div [ngClass]="{ 'form-group': field.type === 'ish-checkbox-field' }" class="row">
<div *ngIf="props.title" class="col-form-label" [ngClass]="props.titleClass ? props.titleClass : dprops.titleClass">
{{ props.title | translate }}<span class="required" *ngIf="props.required && !props.hideRequiredMarker">*</span>
{{ props.titleNoTranslate ? props.title : (props.title | translate)
}}<span *ngIf="props.required && !props.hideRequiredMarker" class="required">*</span>
</div>
<div
class="col-form-label"
Expand All @@ -17,7 +18,7 @@
class="form-check-label"
[ngClass]="props.labelClass ? props.labelClass : dprops.labelClass"
>
<span *ngIf="props.label">{{ props.label | translate }}</span>
<span *ngIf="props.label">{{ props.labelNoTranslate ? props.label : (props.label | translate) }}</span>
<ish-field-tooltip *ngIf="props.tooltip" [tooltipInfo]="props.tooltip" />
</label>
</div>
Expand Down
5 changes: 3 additions & 2 deletions src/app/shared/formly/wrappers/horizontal-wrapper/horizontal-wrapper.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<div class="form-group row" [class.has-error]="showError" [attr.data-testing-id]="keyString + '-wrapper'">
<label
*ngIf="props.label"
[attr.for]="id"
class="col-form-label"
[ngClass]="props.labelClass ? props.labelClass : dprops.labelClass"
*ngIf="props.label"
>{{ props.label | translate }}<span class="required" *ngIf="props.required && !to.hideRequiredMarker">*</span>
>{{ props.labelNoTranslate ? props.label : (props.label | translate)
}}<span *ngIf="props.required && !props.hideRequiredMarker" class="required">*</span>
</label>
<div [ngClass]="props.fieldClass ? props.fieldClass : dprops.fieldClass">
<ng-template #fieldComponent></ng-template>
Expand Down

0 comments on commit 4428c56

Please sign in to comment.