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

Leverage the power of InfiniteSWR in your project by integrating it seamlessly with

`A bug in my Angular 4 application causes a TypeError when hosted on IIS`

Dynamic React Gallery with Interactive Image Picker

Submitting forms using Ajax in Angular 2

Destructuring an array of strings for use as parameters

Angular package that includes horizontal scrolling functionality with arrow buttons

``In Angular 12, what are the best ways to tackle the CORS problem?

User interface designed for objects containing multiple keys of the same data type along with a distinct key

What could be causing the errors I'm encountering in my TypeScript component within AngularJS?

What is the method for adding local images to FormData in Expo version 48 and above?

How to troubleshoot a click event not being stopped in Angular 2

Spread an all-encompassing category across a collection

Async function is improperly updating the array state by overwriting it completely instead of just updating one item as

Code error TS2345 occurs when assigning the argument of type '{ headers: HttpHeaders; }' to a parameter of type 'RequestOptionsArgs'. This indicates a mismatch in the type of data being passed, causing an

What is the best way to convert a tuple containing key/value pairs into an object?

Is it advisable to include auto-generated files in an npm package upon publication?

Jasmine-ts is encountering a problem related to a subpath within a package, causing

The module X is experiencing a metadata version mismatch error. Version 4 was found instead of the expected version 3 while resolving symbol Y

Receiving NULL data from client side to server side in Angular 2 + Spring application

I am looking to customize the mask input in my angular 7 application so that it allows either a "-" or a digit as the first character, with all subsequent characters being digits. How can I make this modification?