ngx-chips autocomplete returns value along with display string

Question

I am following this very basic example https://stackblitz.com/edit/ngx-chips-example

component.ts

export interface AutoCompleteModel {
  value: any;
  display: string;
}

 public items = [
    {display: 'Pizza', value: 1},
    {display: 'Pasta', value: 2},
    {display: 'Parmesan', value: 3},
  ];

component.html

<tag-input [ngModel]="['@items']" >
     <tag-input-dropdown  [autocompleteItems]="items" [showDropdownIfEmpty]="true" [dynamicUpdate]="false"></tag-input-dropdown>
 </tag-input>

But, my result comes like this

Value is displayed along with display. How to remove the value?

score 1 · Answer 1 · answered May 22 '19 at 07:02

1

as per my understanding, you should use [(ngModel)]="selectedItem" for that.

<div class="force-to-the-bottom">
  <tag-input [(ngModel)]="selectedItem">
    <tag-input-dropdown
      [autocompleteItems]="items"
      [showDropdownIfEmpty]="true"
      [dynamicUpdate]="false"
    >
    </tag-input-dropdown>
  </tag-input>
</div>

<pre>{{selectedItem | json}}</pre>

answered May 22 '19 at 07:02

Krishna Rathore

9,389
5
24
48

[(ngModel)]="selectedItem" does not work. But, if I remove all the divs in my html and place only this piece of code, the original example seems to work. – RiyaGeorge May 22 '19 at 07:21

score 0 · Answer 2 · answered May 22 '19 at 06:40

0

From my understanding, if you don't want to display the default value you only need to remove [ngModel]="['@items']" :

<tag-input>
   <tag-input-dropdown
    [autocompleteItems]="items"
    [showDropdownIfEmpty]="true"
    [dynamicUpdate]="false">
   </tag-input-dropdown>
</tag-input>

I tried with your stackblitz and it seems to work: https://stackblitz.com/edit/ngx-chips-example-wq27q1

answered May 22 '19 at 06:40

Johan Rin

1,900
2
20
42

I tried it without the ngModel. Sadly, It still shows the value. – RiyaGeorge May 22 '19 at 06:43
Can you update your stackblitz with your example? Maybe there is something else – Johan Rin May 22 '19 at 06:48
One difference is I use Angular 7. Another difference is in the example, import { TagInputComponent } from './shared/tag-input/tag-input.component'; I am not importing this as I get an error as TagComponent is already part of TagModule. – RiyaGeorge May 22 '19 at 07:00
you should import your own taginputcomponent(if you have one) rather than explicitly importing TagModules's component. kindly check the import for this. Keeping this aside, as requested , make a stackblitz , that showcases what you have tried, so that we could fix it. – KiraAG May 22 '19 at 07:44
KiraAG. Understand, I have already imported in my appmodule. By the way, I found that removing
tag from my component.html fixed the issue. Strange. – RiyaGeorge May 22 '19 at 08:03

score 0 · Answer 3 · edited Oct 26 '19 at 17:06

0

When using assigning a reference as the value for a child component input property [ngModel]="selectedItemsList", do not forget to declare that reference selectedItemsList in the parent component's class.

edited Oct 26 '19 at 17:06

Stphane

3,368
5
32
47

answered Oct 26 '19 at 16:48

neekheel

98
2
18

score 0 · Answer 4 · answered Jan 23 '20 at 12:08

For me I found the problem to be hinted by a console error:

Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.

so just adding a name attribute to the tag-input should solve the problem.. :

<tag-input [ngModel]="['@items']" name="SOME_NAME">
  <tag-input-dropdown  [autocompleteItems]="items" [showDropdownIfEmpty]="true" [dynamicUpdate]="false"></tag-input-dropdown>
</tag-input>

Hope it helps somebody

ngx-chips autocomplete returns value along with display string

4 Answers4