Material: Duplicate Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed in chips.

[sarfrajimpinge]

I am using chips for tagging
Here is my code :

<md-chips ng-model="formData.selectedxxxs" md-autocomplete-snap md-require-match>
                            <md-autocomplete
                                md-selected-item="selectedItem"
                                md-search-text="searchText"
                                md-items="item in querySearch(searchText, 'tagging')"
                                md-item-text="item.trans_title"
                                placeholder="Search for a xxx">
                              <span md-highlight-text="searchText">{$ item.custom_title $}</span>
                            </md-autocomplete>
                            <md-chip-template>
                              <span>
                                <strong>{$ $chip.trans_title $}</strong>
                              </span>
                            </md-chip-template>
                          </md-chips>

But I am getting this duplicate error :

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: $chip in $mdChipsCtrl.items, Duplicate key: string:a,

I know how to overcome this error in ng-repeat but don't know how to solve this here.

[langdonx]

You shouldn't be giving chips an array with duplicate items. I'm not really sure of a use case really that would require duplicate items anyway.

If you try adding the same item twice in the demo, it just gets filtered out, because it's already added:

https://material.angularjs.org/latest/#/demo/material.components.chips

[sarfrajimpinge]

@langdonx yes i know If I'll search same data again chips will filter that out and it is doing so. But even when I will search new data and even if there is only one result in dropdown it will raise this error.

[langdonx]

You'll probably want to reproduce the issue in a fiddle/plnkr/codepen/whatever and post it here.

[topherfangio]

Indeed, a demo with the version you are using would be very helpful. Also, it would be great if you could test it against the master branch as well to see if it is already fixed.

[topherfangio]

We really need a Codepen to be able to investigate this further. If you can provide one, I will reopen and investigate.

[tejasrivastav]

Can be reproduced at : http://codepen.io/anon/pen/KgagRR
I suggest a behaviour where:
The values are rendered and then we put validations on the chip having the state 'INVALID'.

Advantages that we get the UI rendered with all values and the chips which invalid are colour code signifying duplicate entries.

[topherfangio]

Sorry, but we do not support duplicate chips in Angular Material. You are welcome to extend the component however you like. If you want this kind of functionality, you could ensure that your items are objects instead of plain strings and manually do some checking/validation.

This is a very rudimentary example, but this should show you how to get it done: http://codepen.io/topherfangio/pen/PGWdrj

[jotunnjs]

@topherfangio Why do you use $watchCollection in your example instead of md-transform-chip md-on-add ? Thanks

[topherfangio]

@jotunnjs This was a rudimentary example to show how to allow duplicate chips. The $watchCollection was just for the example (it was the first thing I thought of) so that I could highlight the duplicates in red. It would certainly be more efficient to use md-transform-chip or md-on-add in real code 😄