gbuomprisco / ngx-chips Goto Github PK
View Code? Open in Web Editor NEWTag Input component for Angular
License: MIT License
Tag Input component for Angular
License: MIT License
Whenever it displays a dropdown and I press tab key so as to loose current field focus, dropdown keeps on being displayed...
My autocomplete array is ["Item1", "item2", "item3"]
When I type either "i" or "I" the popup always displays only item2 and item3.
Hy,
I get the following error thrown to my console, but as far as I have quickly tested, everything seems to work!
node_modules/ng2-tag-input/index.ts:3:0 Cannot find name 'exports'.
Thank you for an excellent project.
Unfortunately, it looks like it isn't working with Angular-CLI final. I have created a repo here where you can see the issue https://github.com/jculverwell/NgTagsInputWithAngularCLIFinal
Looks like a problem with Zone.js. Not sure if you adjust your project to avoid this issue or if it is a zone.js issue. I will raise with the zone.js repo as well.
zone.js:129 Uncaught TypeError: Cannot read property 'name' of undefined
exports.functionName @ function-name.ts?6954:7
(anonymous function) @ transformer.ts?d0de:89
dependencies @ transformer.ts?d0de:89
(anonymous function) @ transformer.ts?d0de:145
load @ transformer.ts?d0de:53
exports.transform @ transformer.ts?d0de:61
(anonymous function) @ transformer.ts?d0de:161
transformChildren @ transformer.ts?d0de:159
(anonymous function) @ transformer.ts?d0de:180
load @ transformer.ts?d0de:53
exports.transform @ transformer.ts?d0de:61
(anonymous function) @ transformer.ts?d0de:161
transformChildren @ transformer.ts?d0de:159
(anonymous function) @ transformer.ts?d0de:180
load @ transformer.ts?d0de:53
exports.transform @ transformer.ts?d0de:61
(anonymous function) @ transformer.ts?d0de:161
transformChildren @ transformer.ts?d0de:159
(anonymous function) @ transformer.ts?d0de:180
load @ transformer.ts?d0de:53
exports.transform @ transformer.ts?d0de:61
exports.transformToTree @ mutable-tree-factory.ts?f7a1:12
(anonymous function) @ mutable-tree-factory.ts?f7a1:40
exports.createTreeFromElements @ mutable-tree-factory.ts?f7a1:40
updateTree @ backend.ts:65
update @ backend.ts:90
(anonymous function) @ backend.ts:101
SafeSubscriber.__tryOrUnsub @ Subscriber.js?215e:223
SafeSubscriber.next @ Subscriber.js?215e:172
Subscriber._next @ Subscriber.js?215e:125
Subscriber.next @ Subscriber.js?215e:89
DebounceTimeSubscriber.debouncedNext @ debounceTime.js?500c:98
dispatchNext @ debounceTime.js?500c:114
AsyncAction._execute @ AsyncAction.js?e414:111
AsyncAction.execute @ AsyncAction.js?e414:86
AsyncScheduler.flush @ AsyncScheduler.js?ae69:36
ZoneDelegate.invokeTask @ zone.js:225
Zone.runTask @ zone.js:125
ZoneTask.invoke @ zone.js:293
Is it somehow possible to display a error message if the entered tag is not valid?
Like for example in the demo with the custom validator show a message that a tag must start with a @ if the users enters a tag that doesn't.
Or can I access the form validation status somehow to show/hide a message accordingly?
Thanks
Would you please upgrade to support angular-rc6?
zone.js:484 Unhandled Promise rejection: Template parse errors:
'delete-icon' is not a known element:
1. If 'delete-icon' is an Angular component, then verify that it is part of this module.
2. If 'delete-icon' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
<!-- remove 'x' button -->
[ERROR ->]<delete-icon class="tag__remove-button"
aria-label="Remove tag"
("): TagInput@29:12
Can't bind to 'focusFirstElement' since it isn't a known property of 'ng2-dropdown-menu'.
1. If 'ng2-dropdown-menu' is an Angular component and it has 'focusFirstElement' input, then verify that it is part of this module.
2. If 'ng2-dropdown-menu' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
("
<div *ngIf="autocomplete">
<ng2-dropdown>
<ng2-dropdown-menu [ERROR ->][focusFirstElement]="false"
(keydown)="escapeDropdown($event)"
"): TagInput@54:35
Can't bind to 'value' since it isn't a known property of 'ng2-menu-item'.
1. If 'ng2-menu-item' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'ng2-menu-item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
(" <ng2-menu-item *ngFor="let item of itemsMatching"
[ERROR ->][value]="item">
{{ item }}
</ng2-menu-item>
"): TagInput@58:35
'ng2-menu-item' is not a known element:
1. If 'ng2-menu-item' is an Angular component, then verify that it is part of this module.
2. If 'ng2-menu-item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("own)="escapeDropdown($event)"
offset="60 0">
[ERROR ->]<ng2-menu-item *ngFor="let item of itemsMatching"
[value]="item">
"): TagInput@57:20
'ng2-dropdown-menu' is not a known element:
1. If 'ng2-dropdown-menu' is an Angular component, then verify that it is part of this module.
2. If 'ng2-dropdown-menu' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
<div *ngIf="autocomplete">
<ng2-dropdown>
[ERROR ->]<ng2-dropdown-menu [focusFirstElement]="false"
(keydown)="escapeDr"): TagInput@54:16
'ng2-dropdown' is not a known element:
1. If 'ng2-dropdown' is an Angular component, then verify that it is part of this module.
2. If 'ng2-dropdown' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
<div *ngIf="autocomplete">
[ERROR ->]<ng2-dropdown>
<ng2-dropdown-menu [focusFirstElement]="false"
"): TagInput@53:12 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
'delete-icon' is not a known element:
1. If 'delete-icon' is an Angular component, then verify that it is part of this module.
2. If 'delete-icon' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
<!-- remove 'x' button -->
[ERROR ->]<delete-icon class="tag__remove-button"
aria-label="Remove tag"
("): TagInput@29:12
Can't bind to 'focusFirstElement' since it isn't a known property of 'ng2-dropdown-menu'.
1. If 'ng2-dropdown-menu' is an Angular component and it has 'focusFirstElement' input, then verify that it is part of this module.
2. If 'ng2-dropdown-menu' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
("
<div *ngIf="autocomplete">
<ng2-dropdown>
<ng2-dropdown-menu [ERROR ->][focusFirstElement]="false"
(keydown)="escapeDropdown($event)"
"): TagInput@54:35
Can't bind to 'value' since it isn't a known property of 'ng2-menu-item'.
1. If 'ng2-menu-item' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'ng2-menu-item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
(" <ng2-menu-item *ngFor="let item of itemsMatching"
[ERROR ->][value]="item">
{{ item }}
</ng2-menu-item>
"): TagInput@58:35
'ng2-menu-item' is not a known element:
1. If 'ng2-menu-item' is an Angular component, then verify that it is part of this module.
2. If 'ng2-menu-item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("own)="escapeDropdown($event)"
offset="60 0">
[ERROR ->]<ng2-menu-item *ngFor="let item of itemsMatching"
[value]="item">
"): TagInput@57:20
'ng2-dropdown-menu' is not a known element:
1. If 'ng2-dropdown-menu' is an Angular component, then verify that it is part of this module.
2. If 'ng2-dropdown-menu' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
<div *ngIf="autocomplete">
<ng2-dropdown>
[ERROR ->]<ng2-dropdown-menu [focusFirstElement]="false"
(keydown)="escapeDr"): TagInput@54:16
'ng2-dropdown' is not a known element:
1. If 'ng2-dropdown' is an Angular component, then verify that it is part of this module.
2. If 'ng2-dropdown' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
<div *ngIf="autocomplete">
[ERROR ->]<ng2-dropdown>
<ng2-dropdown-menu [focusFirstElement]="false"
"): TagInput@53:12
I am trying to load 50,000 items via the Model in a for loop to the TAG Input. However this is crashing the browser.
Is there a way how to add bulk items without doing re-bind, re-drawing etc..
I was thinking something like
Please Help
I am new in angular 2 and i used angular cli. Can you advise how to build tag-input.
Thanks.
There are some CSS class names in the component like "tag", which may conflict with external libraries' CSS, e.g. Bootstrap (there is also a "tag" class). Eventually your "tag" class dominates over the Bootstrap's one so it looks pretty disgusting.
I recommend you to edit your CSS class names adding no-conflict prefixes, for example:
.n2ti-tag {...}
And even better yet, add the possibility to turn off a component theme completely.
Hi guys,
How can I set a required validation on the ng2-tag input field please? I mean that when user tries to submit the form and nothing has been selected, form will not be submitted.
Thank you for your help.
Kind Regards
i adding the tag-input into my application. On init i getting an error:
Can't bind to '@fade' since it isn't a known native property.
Im running on Angular2 RC4.
My HTML is simple (copied from example page)
<tag-input [ngModel]="['@item']"
[onlyFromAutocomplete]="true"
[autocompleteItems]="['item1', 'item2']"
[autocomplete]="true">
</tag-input>
My Component:
@Component({
selector: 'test-tag',
templateUrl: 'tags.html',
directives: [TagInput],
providers: [NG_FORM_PROVIDER]
})
Error:
Can't bind to '@fade' since it isn't a known native property ("
<!-- MENU -->
<div class='ng2-dropdown-menu' [ERROR ->][@fade]="state.toString()">
<ng-content></ng-content>
</div>
"): Ng2DropdownMenu@6:35
Have you support material_chip?
When I use material_chip and add [(ngModel)] I got next error:
No value accessor for form control with unspecified name attribute
I used it by:
<div materialize="material_chip" [(ngModel)]="tags"></div>
Allow functionality explained in #46
Hello, I think I found a bug.
Imagine that you have tag-input in your form with one-way bound [ngModel]=myarray
.
Case 1:
Load the page and add a new tag, this tag adds to this one-way bound model. That's not correct behavior. The correct behavior is that tag should only add to form's.value.name, but ngModel should stay unchanged.
Case 2:
Load the page and delete some tag, the ng-model stays unchanged (that's correct) and that tag is removed in the form's array only (that's correct too).
After one tag is removed, you can add a new tag and that new tag won't add to the ngModel (that's correct) and only adds to the form's model (that's correct too).
So I think there could be a little bug in your code, with ngModel binding to a tag's input text input. It's fixed when you delete some tag and then add new, so I think somewhere in that delete function is declared something that's missing initially.
You can see the problem here.
Thank you so much for your help!
I say an error when I execute "npm start":
[1] 16.10.06 00:08:21 404 GET /node_modules/ng2-tag-input/dist/dist/modules/ng2-tag-input.module.js
[1] 16.10.06 00:08:21 404 GET /node_modules/ng2-tag-input/dist/dist/modules/components/tag-input.js
This is my systemjs.config.js
(function(global) {
// map tells the System loader where to look for things
var map = {
'moment': 'node_modules/moment/moment.js',
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs',
'ng2-tag-input': 'node_modules/ng2-tag-input/dist'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
'ng2-tag-input': { defaultExtension: 'js', main:'index' },
};
What do these values correspond to? Are they ASCII values? Are they keyboard codes? Are they platform specific?
How would I go about making a comma a code to separate the tags?
Any help would be appreciated! Thanks!
First of all: Congratulations! It's a really precious project!!!
And,.. how could I disable case sensitive for autocomplete tags?
Thanks.
Igor
Hy,
would it be possible to handle duplicates same as in the original ng-chips?
In the original the input filed gets cleared if a duplicate input is entered.
Further more I once found such a input that also made the corresponding duplicate blink once in a different color, to show that such a tag has already been entered. Such a feature would also be great I think.
Hi, @Gbuomprisco !
With the new RC.6 the minification for production enviroments is broken.
If i try to run UglifyJS on my sources with webpack, it gives me:
ERROR in app.js from UglifyJs SyntaxError: Unexpected token punc «,», expected punc «:» [./~/ng2-tag-input/dist/ng2-tag-input.bundle.js:543,0]
I think it is due to the fact that the bundles are not compiled in commonjs.
I did it: (onSelect)="onSelect(tag)" and (onSelect)="onSelect()", Although onSelect is being called, the item/tag always comes undefined.
i get the following error when i do a angular-cli production build after upgrading from version 0.1.3 to 0.2.1:
Build failed.
The Broccoli Plugin: [BundlePlugin] failed with:
Error on dependency parsing for vendor/ng2-tag-input/dist/ng2-tag-input.bundle.js at file:///<PATH>/tmp/bundle_plugin-input_base_path-eXqLvrqq.tmp/0/vendor/ng2-tag-input/dist/ng2-tag-input.bundle.js
Loading vendor/ng2-tag-input/index.js
<LOADING MULTIPLE CUSTOM FILES>
Loading app/index.js
Loading main.js
Error: Multiple anonymous defines.
at ParseTreeTransformer.AMDDependenciesTransformer.transformCallExpression (<PATH>/node_modules/angular-cli/node_modules/systemjs-builder/compilers/amd.js:98:13)
at CallExpression.$__super.transform (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:6948:28)
at ParseTreeTransformer.transformAny (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:9514:44)
at ParseTreeTransformer.transformExpressionStatement (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:9825:31)
at ExpressionStatement.$__super.transform (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:7419:28)
at ParseTreeTransformer.transformAny (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:9514:44)
at ParseTreeTransformer.transformToBlockOrStatement (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:9538:32)
at ParseTreeTransformer.transformIfStatement (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:9955:29)
at IfStatement.$__super.transform (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:7737:28)
at ParseTreeTransformer.transformAny (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:9514:44)
at ParseTreeTransformer.transformToBlockOrStatement (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:9538:32)
at ParseTreeTransformer.transformIfStatement (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:9956:31)
at IfStatement.$__super.transform (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:7737:28)
at ParseTreeTransformer.transformAny (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:9514:44)
at ParseTreeTransformer.transformList (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:9521:34)
at ParseTreeTransformer.transformFunctionBody (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:9895:31)
The broccoli plugin was instantiated at:
at BundlePlugin.Plugin (<PATH>/node_modules/angular-cli/node_modules/broccoli-plugin/index.js:10:31)
at BundlePlugin.CachingWriter [as constructor] (<PATH>/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
at BundlePlugin (<PATH>/node_modules/angular-cli/lib/broccoli/angular-broccoli-bundle.js:11:5)
at Angular2App._getBundleTree (<PATH>/node_modules/angular-cli/lib/broccoli/angular2-app.js:437:22)
at Angular2App._buildTree (<PATH>/node_modules/angular-cli/lib/broccoli/angular2-app.js:160:21)
at new Angular2App (<PATH>/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
at module.exports (<PATH>/angular-cli-build.js:13:13)
at Class.module.exports.Task.extend.setupBroccoliBuilder (<PATH>/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
at Class.module.exports.Task.extend.init (<PATH>/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
at new Class (<PATH>/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
at Class.module.exports.Task.extend.run (<PATH>/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/build.js:15:19)
at <PATH>/node_modules/angular-cli/node_modules/angular-cli/lib/commands/build.js:32:24
at lib$rsvp$$internal$$tryCatch (<PATH>/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (<PATH>/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
at <PATH>/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
at lib$rsvp$asap$$flush (<PATH>/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)
I dont know if its your problem or not, but if you can somehow fix it I would be pleased.
I'm using angular-cli beta.10
If you need more info just let me know.
Thanks
Hy,
I have the issue that adding many tags makes them overflow to the right of the screen. This is because for some reason flex is not wrapping in my example (https://github.com/FallenRiteMonk/tagInputExample) as it is in your live demo. I figured out that adding flex-wrap: wrap;
or flex-wrap: inherit;
to the flex class definition in style.scss fixes the problem for me.
Would it be possible that this could be implemented or do I have to work around it somehow using the custom template?
Hi guys,
I am trying to get ng2-tag-input working but is giving me the following error:
platform-browser.umd.js:2306 Error: No value accessor for ''
I have done exactly step by step as explained in github.
this is my code:
<div>
<h3>Input tag that allows max 3 tags</h3>
<tag-input [ngModel]="['Javascript', 'Typescript']"
[maxItems]="3"
placeholder="Insert a new item"></tag-input>
</div>
@Component({
moduleId: module.id,
selector: 'jobform',
directives: [FILE_UPLOAD_DIRECTIVES, TagInput],
templateUrl: 'jobform.component.html'
})
Any ideas and help will be much appreciated, thanks.
Kind Regards
How can we set max limit of tags.
This is purely a styling issue. I can't think of a way that I can override the css styling on the component to remove the input borders that IMO make it unnecessary big. Besides, in my app, the close buttons appear slightly misplaced (http://pasteboard.co/2YSDQYkK1.png) which I suspect is due to some interaction with my own stylesheet. Problem is, short of forking the entire component, I don't know how to fix it.
Just making the borders optional would be great for now. But Angular 2 really needs a to figure out an unintrusive way to override the style of reusable components.
Hi. and thank you for bringing this awesome module to angular 2.
I'm having some problems when I try to build my application with the Systemjs builder, it seems like there's some define errors when importing the module to the build process. I am able to use the module during development (typescript compiles correctly and such) but when I try to make a build it throws the following error:
Unhandled rejection Error on dependency parsing for npm:ng2-tag-input/dist/ng2-tag-input.bundle.js at file:///C:/dev/tagModuleTest/node_modules/ng2-tag-input/dist/ng2-tag-input.bundle.js
Loading app/app.module.js Loading app/main.js Error: Multiple anonymous defines.
I've tested this by using a barebone quickstart project from angular to get the bare minimum, I'll zip it down and attach it here for reference.
As angular 2 is pretty new (especially the final release) it's quite hard to get some definitive answers on what is wrong here, I'll try to dig a bit deeper into this and will follow up if I get any eureka moments.
Best Regards,
/ Glenn
tagModuleTest.zip
SystemJS) Error: XHR error (404 Not Found) loading http://localhost:3001/node_modules/ng2-tag-input/dist/dist/modules/ng2-tag-input.module.js(…)
Hy,
would it be possible to add the current input to the tags if the input looses focus?
Example:
If I go to the life demo, select the first tag input and start typing, then (without clicking enter) use the mouse to jump to the second tag input, the tag I entered into the first is not added to the tag list.
I don't know if this is intended, but I think this should be changed, because then one could tab to the next form field without having to hit enter.
Thanks and Greetings
I have a TagInput at the bottom of my page, which means the dropdown for autocomplete is mostly hidden, I can only see the top row. It would be great to have an option to choose its placement.
Temporary solution is to move it in an AfterViewChecked callback, which is not great.
How to use in angular2 rc5? bootstrap model has been changed.
How to use with NgModule?
Hi Guys,
I have an issue related to ngs-tag-input. Lately, I have made an update to the latest one.
The following is the package.json:
{
"_args": [
[
"[email protected]",
"C:\\Repository\\Clients\\Current\\Inspectorate\\inspectorate\\www\\Inspectorate\\angular2-seed-master"
]
],
"_from": "[email protected]",
"_id": "[email protected]",
"_inCache": true,
"_installable": true,
"_location": "/ng2-tag-input",
"_nodeVersion": "6.3.1",
"_npmOperationalInternal": {
"host": "packages-16-east.internal.npmjs.com",
"tmp": "tmp/ng2-tag-input-0.2.9.tgz_1473270699594_0.5384787213988602"
},
"_npmUser": {
"email": "[email protected]",
"name": "giancarlo_psk"
},
"_npmVersion": "3.10.3",
"_phantomChildren": {},
"_requested": {
"name": "ng2-tag-input",
"raw": "[email protected]",
"rawSpec": "0.2.9",
"scope": null,
"spec": "0.2.9",
"type": "version"
},
"_requiredBy": [
"/"
],
"_resolved": "https://registry.npmjs.org/ng2-tag-input/-/ng2-tag-input-0.2.9.tgz",
"_shasum": "9534ffb7fc1de12e8164c225552315880c8d98c2",
"_shrinkwrap": null,
"_spec": "[email protected]",
"_where": "C:\\Repository\\Clients\\Current\\Inspectorate\\inspectorate\\www\\Inspectorate\\angular2-seed-master",
"author": {
"email": "[email protected]",
"name": "Giancarlo Buomprisco"
},
"bugs": {
"url": "https://github.com/Gbuomprisco/ng2-tag-input/issues"
},
"contributors": [],
"dependencies": {
"ng2-material-dropdown": "^0.3.1"
},
"description": "Tag Input component for Angular 2",
"devDependencies": {
"@angular/common": "^2.0.0-rc.6",
"@angular/compiler": "^2.0.0-rc.6",
"@angular/core": "^2.0.0-rc.6",
"@angular/forms": "^2.0.0-rc.6",
"@angular/http": "^2.0.0-rc.6",
"@angular/platform-browser": "^2.0.0-rc.6",
"@angular/platform-browser-dynamic": "^2.0.0-rc.6",
"@angular/platform-server": "^2.0.0-rc.6",
"@angular/router": "^2.0.0-rc.2",
"autoprefixer": "^6.3.7",
"awesome-typescript-loader": "~0.16.2",
"core-js": "^2.4.1",
"css-loader": "^0.23.1",
"es6-promise": "3.0.2",
"es6-shim": "0.35.0",
"file-loader": "^0.9.0",
"html-loader": "^0.4.3",
"jasmine": "^2.4.1",
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3",
"karma-coverage": "^1.1.0",
"karma-jasmine": "^0.3.8",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "1.7.0",
"node-sass": "^3.8.0",
"postcss-loader": "^0.9.1",
"precss": "^1.4.0",
"protractor": "^3.3.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.11",
"sass-loader": "^3.2.3",
"source-map-loader": "^0.1.5",
"style-loader": "^0.13.1",
"ts-helpers": "1.1.1",
"ts-node": "^0.7.3",
"tslint": "^3.13.0",
"typescript": "~1.8.9",
"typings": "~1.0.3",
"url-loader": "^0.5.7",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.0",
"webpack-merge": "^0.8.4",
"zone.js": "0.6.17"
},
"directories": {},
"dist": {
"shasum": "9534ffb7fc1de12e8164c225552315880c8d98c2",
"tarball": "https://registry.npmjs.org/ng2-tag-input/-/ng2-tag-input-0.2.9.tgz"
},
"files": [
"dist",
"index.ts"
],
"gitHead": "536de8e8000b8af43f5296b57704c82aa8fc3ad9",
"homepage": "https://github.com/Gbuomprisco/ng2-tag-input",
"keywords": [
"angular 2",
"angular 2 tag input",
"tag input component"
],
"license": "MIT",
"main": "./dist/index.js",
"maintainers": [
{
"name": "giancarlo_psk",
"email": "[email protected]"
}
],
"name": "ng2-tag-input",
"optionalDependencies": {},
"readme": "ERROR: No README data found!",
"repository": {
"type": "git",
"url": "git+https://github.com/Gbuomprisco/ng2-tag-input.git"
},
"scripts": {
"build": "webpack --inline --colors --progress --display-error-details --display-cached",
"postinstall": "npm run typings-install",
"prepublish": "npm run build && ./node_modules/.bin/tsc",
"server": "webpack-dev-server --config webpack.demo.js --inline --colors --progress --display-error-details --display-cached --port 3000 --content-base demo",
"start": "npm run server",
"test": "karma start karma.conf.js",
"typings-install": "typings install",
"watch": "npm run build -- --watch"
},
"version": "0.2.9"
}
Now, I am experiencing an issue where it is telling me the following error when executing the script where System.import('app/main')
localhost/:136 Error: TypeError: core_1.NgModule is not a function(…) "Report this error at https://github.com/mgechev/angular2-seed/issues"(anonymous function) @ localhost/:136
I cannot run the application no more because of this error.
Can anyone help me sort this out, please?
Thank you.
Hey,
I was looking at ng2-tag-input as a replacement for ng2-select.
Your library seems like the perfect match for us. The only option I'm missing right now is to specify my own getMatchingItems function.
In our use case, we need not only provide beginning of word matching, but also return items that match in the middle of the word (so not really an autocomplete functionality, but more a simple search functionality). Also, we'd like to show the whole list of options, when the input is empty and the user clicks into it.
Hope that makes sense,
Wolfgang
I get the following error when i try to build/serve my project using angular-cli beta 16 and ng2-tag-input module version 0.3.4 with the --aot option:
Error encountered resolving symbol values statically. Calling function 'require', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol TagInputModule in <PROJECT_PATH>/node_modules/ng2-tag-input/index.ts, resolving symbol <MODULE_NAME> in <MODULE_TS_FILE_PATH>, resolving symbol <MODULE_NAME> in <MODULE_TS_FILE_PATH>
Hi,
I am using 0.3.7 version, I couldnot able to load .js file. Can someone please help me on this?
Thanks in advance
The project won't compile:
1>C:\Project\node_modules\ng2-tag-input\index.ts(1,18): error TS2304: Build:Cannot find name 'require'.
2>C:\Projects\node_modules\ng2-tag-input\index.ts(3,1): error TS2304: Build:Cannot find name 'exports'.
I am using RC5. See my package.json
{
"version": "1.0.0",
"name": "project",
"private": true,
"dependencies": {
"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"@angular/upgrade": "2.0.0-rc.5",
"core-js": "^2.4.0",
"ng2-tag-input": "^0.2.3",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"zone.js": "^0.6.12"
},
"devDependencies": {
"gulp-clean": "^0.3.2",
"gulp-concat": "2.6.0",
"gulp-cssmin": "0.1.7",
"gulp-notify-growl": "^1.0.2",
"gulp-sass": "^2.3.2",
"gulp-sourcemaps": "^1.6.0",
"gulp-tsc": "^1.2.0",
"gulp-typescript": "^2.13.6",
"gulp-uglify": "2.0.0",
"gulp-watch": "^4.3.9",
"path": "^0.12.7",
"rimraf": "2.5.3",
"typescript": "^1.8.10",
"typings": "^1.3.1"
}
}
Hi! First off -- great component, much better than my attempt at a tag input.
I have noticed a few things that I thought I'd mention:
Hy,
I have problems trying to implement this component.
The error i get is the following:
EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'ngFormModel' since it isn't a known native property ("
<!-- form -->
<form (ngSubmit)="add()" *ngIf="input.isVisible.call(this)" [ERROR ->][ngFormModel]="form">
<input type="text"
required
I am using the new Angular Form module "@angular/forms": "0.1.1"
, but I don't know if that is relevant.
Thanks for your help,
FallenRiteMonk
Hy,
you have a UNMET PEER DEPENDENCY error in your current version.
Angular forms 0.1.1 requires angular2 version rc.3, but you have rc.4 as dependency.
Upgrading to forms 0.2.0 fixes the dependency issue, but breaks your test, even though everything seems to be working fine.
Downgrading to rc.3 fixes the issue also, without breaking the tests.
Hi,
Thank you for your hard work. The component is very nice and simply.
But I faced with the next requirement on my project to pass an array of object inside of [autocompleteItems] and specify a property to display/search like this:
<tag-input [onlyFromAutocomplete]="true" [autocompleteItems]="[{name: 'Item1', id: 1}, {name: 'Item2', id: 2}]" [autocompleteDisplayProperty]="'name'" // display property name [autocomplete]="true" [ngModel]="tags"> </tag-input>
Do you have similar features?
Regards,
Dmytro
I've run into an issue with the control on my form when attempting to use the autocomplete function. The error below is thrown whenever a key has been pressed in the control.
I set a break point on the first line of the handleKeypress method in ng2-dropdown-menu.ts (line 106). When that break point is hit, this
is undefined, so this.state
is undefined.
EXCEPTION: TypeError: Cannot read property 'state' of undefined platform-browser.umd.js:937 EXCEPTION: TypeError: Cannot read property 'state' of undefinedBrowserDomAdapter.logError @ platform-browser.umd.js:937BrowserDomAdapter.logGroup @ platform-browser.umd.js:947ExceptionHandler.call @ core.umd.js:4389next @ core.umd.js:9971schedulerFn @ core.umd.js:9168SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:9156onError @ core.umd.js:9394onHandleError @ core.umd.js:9266ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ core.umd.js:9278NgZone.runGuarded @ core.umd.js:9510outsideHandler @ platform-browser.umd.js:1913ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 platform-browser.umd.js:937 STACKTRACE:BrowserDomAdapter.logError @ platform-browser.umd.js:937ExceptionHandler.call @ core.umd.js:4391next @ core.umd.js:9971schedulerFn @ core.umd.js:9168SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:9156onError @ core.umd.js:9394onHandleError @ core.umd.js:9266ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ core.umd.js:9278NgZone.runGuarded @ core.umd.js:9510outsideHandler @ platform-browser.umd.js:1913ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 platform-browser.umd.js:937 TypeError: Cannot read property 'state' of undefined at Ng2DropdownMenu.handleKeypress (ng2-dropdown-menu.ts:106) at eval (platform-browser.umd.js:1836) at eval (platform-browser.umd.js:1913) at ZoneDelegate.invoke (zone.js:323) at Object.onInvoke (core.umd.js:9245) at ZoneDelegate.invoke (zone.js:322) at Zone.runGuarded (zone.js:230) at NgZoneImpl.runInnerGuarded (core.umd.js:9278) at NgZone.runGuarded (core.umd.js:9510) at HTMLBodyElement.outsideHandler (platform-browser.umd.js:1913)BrowserDomAdapter.logError @ platform-browser.umd.js:937ExceptionHandler.call @ core.umd.js:4392next @ core.umd.js:9971schedulerFn @ core.umd.js:9168SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:9156onError @ core.umd.js:9394onHandleError @ core.umd.js:9266ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ core.umd.js:9278NgZone.runGuarded @ core.umd.js:9510outsideHandler @ platform-browser.umd.js:1913ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 zone.js:260 Uncaught TypeError: Cannot read property 'state' of undefinedNg2DropdownMenu.handleKeypress @ ng2-dropdown-menu.ts:106(anonymous function) @ platform-browser.umd.js:1836(anonymous function) @ platform-browser.umd.js:1913ZoneDelegate.invoke @ zone.js:323onInvoke @ core.umd.js:9245ZoneDelegate.invoke @ zone.js:322Zone.runGuarded @ zone.js:230NgZoneImpl.runInnerGuarded @ core.umd.js:9278NgZone.runGuarded @ core.umd.js:9510outsideHandler @ platform-browser.umd.js:1913ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423
Probably related to latest integrations.
Hy,
I have the problem that I use space as a seperator (key 32) for my tags, but I also validate against the following regex: new RegExp('^[a-zA-Z0-9\\-_]+$')
The problem now is that due to space not being allowed in my tags the error message below the input appears, instead of the tag (without the space) being added.
I think this should be changed!
thanks and greetings
Thank you, the project is excellent.
I encounter a problem during compilation.
[default] /client/node_modules/ng2-tag-input/index.ts:1:20
Cannot find name 'require'.
[default] Checking finished with 1 errors
Is there anything i miss in my node modules ?
Hi. I've noticed some issue in component rendering when I placed tag-input
inside <form></form>
. Initial values are not rendered until input is touched in my case.
I've created a demo that briefly mirrors my original situation.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.