PrimeNG autocomplete with object binding

Question

Currently with my autocomplete setup my input field shows "[object Object]" rather than the appropriate property of the selected suggestion.

The suggestions themselves render ok, showing the groupName and groupDescription properties correctly, but after selection my input is just rendering the object rather than the 'groupName' field like I was hoping the [field] attribute would instruct.

        <p-autoComplete [(ngModel)]="groupSearchText" [suggestions]="groupResults" (completeMethod)="search($event)" [field]="groupName"  [size]="30" [minLength]="3">

            <template let-group pTemplate="item">
                <div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
                    <div style="font-size:18px;margin:10px 10px 0 0">{{group.groupName}}</div>
                    <div style="font-size:10px;margin:10px 10px 0 0">{{group.groupDescription}}</div>
                </div>
            </template>

        </p-autoComplete>

Nehal Nehal · Accepted Answer · 2017-06-21T21:28:52

Change [field]="groupName" to field="groupName"

If you look at PrimeNG's doc, they dont use [] for field either.

Example from PrimeNG doc:

<p-autoComplete [(ngModel)]="countries" [suggestions]="filteredCountriesMultiple" (completeMethod)="filterCountryMultiple($event)" styleClass="wid100"
    [minLength]="1" placeholder="Countries" field="name" [multiple]="true">
</p-autoComplete>

I also tested in my own app using [field], caused the same problem you mentioned.

PrimeNG autocomplete with object binding

1 Answers