[FIXED] Primeng's 'selectedItem' template does not work, it always sets the selected value to the 'field' property that was set in the AutoComplete

Issue

Basically, I’m trying to utilize the selected item template for an PrimeNG’s AutoComplete, but does not work. In the code below I specify in the ‘selectedItem’ template to format the value in a certain way. Is there something that I’m missing?

<p-autoComplete [formControlName]="controlModel.id"
                                [forceSelection]="true"
                                [suggestions]="httpSearchResult"
                                field="Identifier"
                                (completeMethod)="searchFromUrl($event.query)"
                                (onSelect)="setSearchBoxValue()"
                                [dropdown]="true"
                                [placeholder]="'Select ' + controlModel.displayName"
                                [multiple]="controlModel.multiple">
                    <ng-template let-searchItem pTemplate="item">
                        <ng-container *ngIf="searchItem.DisplayLabel == '' && searchItem.Identifier != ''">
                            <div class="ui-helper-clearfix">
                                <div>{{searchItem.Identifier}}</div>
                            </div>
                        </ng-container>
                        <ng-container *ngIf="searchItem.DisplayLabel != '' && searchItem.Identifier == ''">
                            <div class="ui-helper-clearfix">
                                <div>{{searchItem.DisplayLabel}}</div>
                            </div>
                        </ng-container>
                        <ng-container *ngIf="searchItem.DisplayLabel != '' && searchItem.Identifier != ''">
                            <div class="ui-helper-clearfix">
                                <div>{{searchItem.Identifier}} - {{searchItem.DisplayLabel}}</div>
                            </div>
                        </ng-container>
                    </ng-template>
                    <ng-template let-searchItem pTemplate="selectedItem">
                        <div class="ui-helper-clearfix">
                            <div>{{searchItem.Identifier}} - {{searchItem.DisplayLabel}}</div>
                        </div>
                    </ng-template>
                </p-autoComplete>```

Solution

Found a workaround online that will solve this problem: https://github.com/primefaces/primeng/issues/2242#issuecomment-440684864

Answered By – Bogu

Answer Checked By – Timothy Miller (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published