When searching for inventory, users have the option to refine their search using various criteria. If a user does not select any options, ng-select interprets this as "NULL," which causes an issue because the server expects an empty string in the GET request. One solution is to eliminate placeholder text and use an empty string instead, but this negatively impacts user experience. I am looking for a way to pass an empty string when nothing is selected in ng-select while still displaying placeholder text.
<ng-select placeholder="{{'Select year' | translate}}" [(ngModel)]="selectedHeavyDutyYear" [items]="searchHeavyDutyYears" [clearable]="false" (change)="populateHeavyDutyMakes()" [disabled]="isLoading" dropdownPosition="bottom"></ng-select>
<ng-select placeholder="{{'Select make' | translate}}" [(ngModel)]="selectedHeavyDutyMake" [items]="searchHeavyDutyMakes" [clearable]="false" (change)="populateHeavyDutyModels()" [disabled]="isLoading || !selectedHeavyDutyYear" dropdownPosition="bottom"></ng-select>
<ng-select placeholder="{{'Select model' | translate}}" [(ngModel)]="selectedHeavyDutyModel" [items]="searchHeavyDutyModels" [clearable]="false" (change)="searchHeavyDutyYmmIfDesktop()" [disabled]="isLoading || !selectedHeavyDutyMake" dropdownPosition="bottom"></ng-select>
Many users face this problem, and I found a potential solution on http://jsfiddle.net/CB5um/. However, I am struggling with implementing it as a directive that can be applied to any Angular 7 select element.