question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Problem with identifyBy and displayBy

See original GitHub issue

I’m submitting a … (check one with “x”)

[x ] bug report => search github for a similar issue or PR before submitting
[ ] support request/question

**Current behavior**
`// itemsAsObjects = [{display: 0, value: 'Angular'}, {display: 1, value: 'React'}];
`// selectedObjects = [{display: 0, value: 'Angular'}];
<tag-input [ngModel]="selectedItems">
    <tag-input-dropdown [showDropdownIfEmpty]="true"
                        [autocompleteItems]="itemsAsObjects">
    </tag-input-dropdown>
</tag-input>`

See properties of the array and attributes of tag-input element. It works in this way.

**Expected behavior**
`// itemsAsObjects = [{id: 0, name: 'Angular'}, {id: 1, name: 'React'}];
`// selectedObjects = [{id: 0, name: 'Angular'}];
<tag-input [ngModel]="selectedItems" [identifyBy]="'id'" [displayBy]="'name'">
    <tag-input-dropdown [showDropdownIfEmpty]="true"
                        [autocompleteItems]="itemsAsObjects">
    </tag-input-dropdown>
</tag-input>`

It also should work in this way but that error shows up:

> Cannot read property 'toString' of undefined error

**Angular version:** 
Angular 5.2.9

**ngx-chips version:**
1.8.0


**Browser:** [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
<!-- All browsers where this could be reproduced -->

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:10 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
Gbuompriscocommented, Apr 17, 2018

You need to redefine identifyby and displayby in the dropdown

1reaction
oestrada1001commented, Feb 12, 2020

ngx-chips version: 2.1.0 angular version: 8.2.14

I was getting this error and I was able to get it to work by applying [displayBy] and [identifyBy] to the <tag-input-dropdown> element.

HTML:

...
  <tag-input formControlName="newSkill"
              [identifyBy]="'id'"
              [displayBy]="'keyword'">
    <tag-input-dropdown
        [showDropdownIfEmpty]="true"
        [autocompleteItems]="keywords"
        [identifyBy]="'id'"
        [displayBy]="'keyword'">
    </tag-input-dropdown>
  </tag-input>
...

TS:

...
keywords = [
    [id: 1, keyword: 'art'],
    [id: 2, keyword: 'accounting']
];
...

I used FormBuilder and it’s working properly.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can't bind to 'model' since it isn't a known property of 'tag'
I'm trying to use ng2-tag-input to my ionic 2 app. But i get this error when do ionic run android with production mode(--prod).ng2-tag-input ......
Read more >
ngx-chips - npm
identifyBy - [ ?any ]. Any value you want your tag object to be defined by (defaults to value ). displayBy - [...
Read more >
Email Feature in Angular(using ngx-chips and angular-editor)
It must have 'identifyBy' and 'displayBy' property. ... implemented a custom validator and their error messages to be displayed accordingly.
Read more >
Angular Ngx Chip Dropdown Test (forked) - StackBlitz
<tag-input-dropdown *ngIf="!isHidden". [appendToBody]="true". [showDropdownIfEmpty]="true". [autocompleteItems]="tagItems". [identifyBy]="'id'" [displayBy].
Read more >
Ngx-Chips - Autocomplete list not updated after receiving ...
Coding example for the question Ngx-Chips - Autocomplete list not updated after receiving response-angular.js.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found