When attempting to update an array of strings acting as the model for an ng-select, the values do not appear correctly in the search box.
The values that are displaying correctly are the ones selected from the dropdown menu. However, the numbers I manually add to the list do not display properly.
Select box in template:
<ng-select
id="oNumberSelect"
[items]="ownerNumberResults | async"
[typeahead]="typeAhead$"
bindLabel="desc"
bindValue="code"
dropdownPosition="bottom"
[(ngModel)]="selectedOwnerNumbers"
(ngModelChange)="handleSelectionChange()"
[multiple]="true"
[searchable]="true"
multiple="true"
style="overflow-y: auto; width: 100%"
appendTo="body"
(paste)="handlePaste($event)"
minTermLength="3"
[addTag]="true"
>
</ng-select>
Referenced methods:
handlePaste(pasteEvent: ClipboardEvent): void {
pasteEvent.stopPropagation();
pasteEvent.preventDefault();
const clipStrings:string[] = [...pasteEvent.clipboardData.getData('Text').trim().split(/[\s,)]+/)]
this.selectedOwnerNumbers = [...this.selectedOwnerNumbers, ...clipStrings];
}
searchOwnerNumbers(): void {
this.ownerNumberResults = this.typeAhead$.pipe(
distinctUntilChanged(),
debounceTime(500),
switchMap(term => {
return this.ownerHttpService.searchOwnerProperty('ownerNumber', term);
}
)
);
}
handleSelectionChange(): void {
console.log(this.selectedOwnerNumbers)
}
Select variables:
selectedOwnerNumbers: string[];
typeAhead$ = new Subject<string>();
ownerNumberResults: Observable<Option[]>;
I have attempted various techniques such as using sets and different array arrangements but I am unable to get the pasted values to display correctly in the UI.