Skip to content

Commit

Permalink
feat: formly - data type of the input addon text extended by Observab…
Browse files Browse the repository at this point in the history 
…le<string>
  • Loading branch information
@SGrueber
SGrueber committed Dec 7, 2021
1 parent 5e44ece commit bb1a47c
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 15 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 @@ -267,15 +267,15 @@ Refer to the tables below for an overview of these parts.

### 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; }, addonRight?: {text: 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. |
| 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: 3 additions & 3 deletions src/app/shared/formly/wrappers/input-addon-wrapper/input-addon-wrapper.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<div class="align-items-start" [ngClass]="{ 'input-group': to.addonLeft || to.addonRight }">
<div class="align-items-start flex-nowrap" [ngClass]="{ 'input-group': to.addonLeft || to.addonRight }">
<div *ngIf="to.addonLeft" class="input-group-prepend">
<span class="input-group-text">{{ to.addonLeft?.text | translate }}</span>
<span class="input-group-text">{{ addonLeftText | async | translate }}</span>
</div>
<div class="flex-grow-1"><ng-container #fieldComponent></ng-container></div>
<div *ngIf="to.addonRight" class="input-group-append">
<span class="input-group-text">{{ to.addonRight?.text | translate }}</span>
<span class="input-group-text">{{ addonRightText | async | translate }}</span>
</div>
</div>
21 changes: 18 additions & 3 deletions src/app/shared/formly/wrappers/input-addon-wrapper/input-addon-wrapper.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,31 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FieldWrapper } from '@ngx-formly/core';
import { of } from 'rxjs';

/**
* Wrapper to add input-addons to fields, using bootstrap styling.
*
* @templateOption **addonRight** - object of type ``{ text: string }`` that will be used to render an input addon to the right of the field.
* @templateOption **addonLeft** - object of type ``{ text: string }`` that will be used to render an input addon to the left of the field.
* @templateOption **addonRight** - object of type ``{ text: string }`` or ``{ text: Observable<string> }`` that will be used to render an input addon to the right of the field.
* @templateOption **addonLeft** - object of type ``{ text: string }`` or ``{ text: Observable<string> }`` that will be used to render an input addon to the left of the field.
*
*/
@Component({
selector: 'ish-input-addon-wrapper',
templateUrl: './input-addon-wrapper.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class InputAddonWrapperComponent extends FieldWrapper {}
export class InputAddonWrapperComponent extends FieldWrapper {
get addonLeftText() {
if (!this.to.addonLeft?.text) {
return;
}
return typeof this.to.addonLeft.text === 'string' ? of(this.to.addonLeft.text) : this.to.addonLeft.text;
}

get addonRightText() {
if (!this.to.addonRight?.text) {
return;
}
return typeof this.to.addonRight.text === 'string' ? of(this.to.addonRight.text) : this.to.addonRight.text;
}
}

0 comments on commit bb1a47c

Please sign in to comment.