@stratio/egeo
Version:
56 lines (48 loc) • 4.65 kB
Markdown
Tag InputThis component is a text input box that automatically creates tags out of a typed text.
| 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 |
```html
<st-tag-input class="st-form-field"
name="tag-input-reactive"
formControlName="tag-input-reactive"
[]="filteredlist"
[]="true"
[]="disabled"
[]="'Tag Input with Reactive Form'"
[]="'tag-input-reactive'"
[]="'Add tags separated by commas'"
[]="'This is a Tag Input component tooltip'"
[]="['test']"
(input)="onFilterList($event)">
</st-tag-input>
<st-tag-input class="st-form-field"
name="tag-input-template-driven"
[(ngModel)]="tags.templateDriven"
[]="filteredlist"
[]="true"
[]="disabled"
[]="'Tag Input with Template Driven Form'"
[]="'tag-input-template-driven'"
[]="'Add tags separated by commas'"
[]="'This is a Tag Input component tooltip'"
[]="pattern"
(input)="onFilterList($event)">
</st-tag-input>
```