Ionic 2 Module which allows to write the content in popular tags form.
- Custom labels and placeholders
- Maximum length of word restriction
- Maximum amount of items restriction
- Prevent duplicates restriction
- Callback fn after added or removed tag
npm install --save ionic2-tags-input
import { TagsInputModule } from 'ionic2-tags-input';
// import the module
@NgModule({
...
imports: [
TagsInputModule
]
})Bind component to formControl or ngModel
<tags-input formControlName="animals"></tags-input>Form structure
public animals:FormGroup = this.formBuilder.group({
animals: [
[
{
'name': 'Gazelle'
},
{
'name': 'Cat'
}
]
],
});| Name | Type | Description | Default Value |
|---|---|---|---|
| maxTags | number | Number of tags allowed. If maximum value is achieved, add button becomes disabled | N/A |
| maxWordLength | number | Maximum length of the word/sentence | N/A |
| allowDuplicates | boolean | Allow duplicates | false |
| buttonLabel | string | Add button label | Add |
| alertTitleLabel | string | The title of alert | Add item |
| alertInputPlaceholder | string | Placeholder of the input inside the alert modal | Type text |
| alertButtonLabel | string | Label of the alert button | OK |
| wordLengthRestrictionMsg | string | Text displayed if word is too long | Error: This word is too long |
| duplicatesRestrictionMsg | string | Text displayed if user is trying to make a duplicate | Error: Duplicates are not allowed |
| Attribute Name | Type | Description |
|---|---|---|
| onTagAdded | fn | Callback fn after added tag |
| onTagRemoved | fn | Callback fn after removed tag |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent