Gbuomprisco / ngx-chips

Tag Input component for Angular
MIT License
902 stars 359 forks source link

unable to add items containing numeric identifier #811

Closed mtinnes closed 6 years ago

mtinnes commented 6 years ago

PLEASE MAKE SURE THAT:

I'm submitting a ... (check one with "x")

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

Notice: feature requests will be ignored, submit a PR if you'd like

Current behavior

The control breaks when identifyBy is assigned to a numeric field withing the model. We have a model where 'id' has a numberic value. When selecting a new value from autocomplete the control breaks with the following error:


core.js:1673 ERROR TypeError: this.tagInput.formValue.trim is not a function
    at TagInputDropdown.push../node_modules/ngx-chips/esm5/ngx-chips.js.TagInputDropdown.getFormValue (ngx-chips.js:511)
    at SafeSubscriber.TagInputDropdown.show [as _next] (ngx-chips.js:368)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:195)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:133)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:38)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at DebounceTimeSubscriber.push../node_modules/rxjs/_esm5/internal/operators/debounceTime.js.DebounceTimeSubscriber.debouncedNext (debounceTime.js:48)
    at AsyncAction.dispatchNext (debounceTime.js:62)

Expected behavior

The control should continue to allow adding new tags.

Minimal reproduction of the problem with instructions (if applicable)

Using the following HTML

                               placeholder="{{ 'GENERIC.PLUS_ADD' | translate }}" [onlyFromAutocomplete]="true" [allowDupes]="false"
                               [displayBy]="'fullName'"
                               [identifyBy]="'id'">
                        <tag-input-dropdown [showDropdownIfEmpty]="true"
                                            [displayBy]="'fullName'"
                                            [identifyBy]="'id'"
                                            [autocompleteItems]="users">
                            <ng-template let-item="item" let-index="index">
                                <i class="fa fa-user" aria-hidden="true"></i> {{ item.fullName }} [{{item.username}}]
                            </ng-template>
                        </tag-input-dropdown>
                    </tag-input>

users is an array with the following model:

[{ id: 123, fullName: 'Test user', username: 'test' }]

What do you use to build your app?. Please specify the version

angular-cli

Angular version:

6.1.3

ngx-chips version:

1.9.7

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 ]

Chrome 68.0.3440.106

AlexOliinyk1 commented 6 years ago

Same bug for me. @mtinnes Did you find any solution? Thank you.

mtinnes commented 6 years ago

I just mapped my model to a string based id. Something like this:

users.map(o => {
                return { id: ''+o.id, fullName: o.fullName, username: o.username };
            });
OleksandrOliinyk commented 6 years ago

@mtinnes Thanks.

Gbuomprisco commented 6 years ago

Should be fixed with 1.9.8