UNPKG

@stratio/egeo

Version:
56 lines (48 loc) 4.65 kB
# {TITLE} (Component) Tag InputThis component is a text input box that automatically creates tags out of a typed text. ## Inputs | Property | Type | Req | Description | Default | | --------------------------- | --------------------------------------------- | ----- | --------------------------------------------------------------------------------------------------------------------- | ------- | | label | String \| null | False | Label to show over the input. It is empty by default | null | | tooltip | String \| null | False | The tooltip to show over the label. It is empty by default | null | | placeholder | String \| null | False | The text that appears as placeholder of the input. It is empty by default | null | | errorMessage | String \| null | False | Error message to show. It is empty by default | null | | type | String \| null | False | Type of the items | null | | withAutocomplete | Boolean | False | Enable autocomplete feature. It is false by default | false | | autocompleteList | (StDropDownMenuItem \| StDropDownMenuGroup)[] | False | List to be used for autocomplete feature. It is empty by default | Array() | | charsToShowAutocompleteList | Boolean | False | List to be used for autocomplete feature. It is empty by default | Array() | | allowFreeText | Boolean | False | Boolean to allow user to type a free text or not | true | | infoMessage | String | False | Message used to inform user about what values he has to introduce | | | forbiddenValues | String[] | False | A list of values that user can not type and if he types one of them,tag input will be invalid. It is empty by default | Array() | | regularExpression | String | False | Regular expression to validate values. It is null by default | | | forceValidations | Boolean | False | If you specify it to 'true', the tag input checks the errors before being modified by user | false | | disabled | Boolean | False | Disable the component. It is false by default | false | ## Example ```html <st-tag-input class="st-form-field" name="tag-input-reactive" formControlName="tag-input-reactive" [autocompleteList]="filteredlist" [withAutocomplete]="true" [disabled]="disabled" [label]="'Tag Input with Reactive Form'" [id]="'tag-input-reactive'" [placeholder]="'Add tags separated by commas'" [tooltip]="'This is a Tag Input component tooltip'" [forbiddenValues]="['test']" (input)="onFilterList($event)"> </st-tag-input> <st-tag-input class="st-form-field" name="tag-input-template-driven" [(ngModel)]="tags.templateDriven" [autocompleteList]="filteredlist" [withAutocomplete]="true" [disabled]="disabled" [label]="'Tag Input with Template Driven Form'" [id]="'tag-input-template-driven'" [placeholder]="'Add tags separated by commas'" [tooltip]="'This is a Tag Input component tooltip'" [regularExpression]="pattern" (input)="onFilterList($event)"> </st-tag-input> ```