Is the ng-selector in Angular2 not sorting items alphabetically as expected?

Question

Is the ng-selector in Angular2 not sorting items alphabetically as expected?

This code snippet demonstrates the use of ng-selector in an .html file

<ng-selector 
                name="company"
               [(ngModel)]="company_selected"

                [formControl]="loanApplyForm.controls['company']"
                (loadValues)="fetchHLCompany($event)"
                id-field="id" label-field="name"
                 [options]="company_values"
                 allow-creation="true"
                 placeholder="Search your company">
</ng-selector>

I am facing a couple of issues with this implementation. When I enter a value, it prompts to add even if the typed value is already in the list. I want it to only ask to add if the input value is not in the existing list. I tried removing 'allow-creation' but then it doesn't prompt at all. Secondly, the search functionality is not sorting results alphabetically. Any assistance on these matters would be greatly appreciated. Thank you in advance.

angular typescript angular-ngselect

Answer 1

Answer №1

If I understand correctly, you can achieve the following:

<ng-selector 
                name="company"
                [(ngModel)]="company_selected"

                [formControl]="loanApplyForm.controls['company']"
                (loadValues)="fetchHLCompany($event)"
                id-field="id" label-field="name"
                [options]="company_values"
                allow-creation="checkAddNewItem()"
                placeholder="Search your company">
</ng-selector>

Here is the function being used:

checkAddNewItem() {
   return !company_values.filter(item => item.includes(company_selected)).length;
}

This function checks if any values in the array contain the inputted values. If any do, it returns true and allows for the addition of that value.

In response to a follow-up question about sorting the options list, you need to sort it before setting it in the component upon retrieval.

company_values.sort((a, b) => a.localeCompare(b));

Answer 2

If I understand correctly, you can achieve the following:

<ng-selector 
                name="company"
                [(ngModel)]="company_selected"

                [formControl]="loanApplyForm.controls['company']"
                (loadValues)="fetchHLCompany($event)"
                id-field="id" label-field="name"
                [options]="company_values"
                allow-creation="checkAddNewItem()"
                placeholder="Search your company">
</ng-selector>

Here is the function being used:

checkAddNewItem() {
   return !company_values.filter(item => item.includes(company_selected)).length;
}

This function checks if any values in the array contain the inputted values. If any do, it returns true and allows for the addition of that value.

In response to a follow-up question about sorting the options list, you need to sort it before setting it in the component upon retrieval.

company_values.sort((a, b) => a.localeCompare(b));

Is the ng-selector in Angular2 not sorting items alphabetically as expected?

Answer №1

Similar questions

Having trouble with NPM build getting stuck in Azure DevOps

The data remains undefined even after being initialized in the constructor

Implementing method overrides in TypeScript class objects inherited from JavaScript function-based classes

Unraveling the Mystery: How Angular Handles Propagation of Color CSS Property Settings to Nested Components

Can one validate a single route parameter on its own?

Discovering subtype relationships in JSON with TypeScript

Ways to speed up the initial loading time in Angular 7 while utilizing custom font files

Dependencies for Angular2 Material components on npm

"Encountering issues with ngrx store selector when importing app from a custom

Tips for incorporating confidence intervals into a line graph using (React) ApexCharts

Understanding the data types of functions in TypeScript can be quite important for

Troubleshooting npm test failure on CircleCI due to inability to locate installed package

ValueError: The object is not a valid HTMLInputElement in Angular 5

Using Angular 4 with Firebase to display nested objects within an object

React Router Issue: Component Not Rendering When <nav> Element Is Incomplete

Typescript's Patch<T> type enforces strictness within the codebase

Presentation of information with loading and error scenarios

Exploring the depths of Rx.ReplaySubject: Techniques for delaying the `next()` event

What is the correct way to utilize refetchOnReconnect for a builder.mutation endpoint in @redux/toolkit/query?

How come the variable `T` has been assigned two distinct types?