Changing the input value of the ng-select component while user types in angular 2

Question

I have an ng-select component. I want to trim the input text the user puts in as s/he types. I have the below code i can take the text the user types but i could not figure out a way to put the trimmed text back to ng-select.

<ng-select #vehicleInfoSelect [allowClear]="true"
   [(items)]="vehicleNumberList"
   (selected)="vehicleNoSelected($event)"
   (removed)="vehicleNoRemoved($event)"
   (typed)="vehicleNumberTyped($event)"
   placeholder="{{'vehicleInfo.placeHolder.filterVehicleNumberSelectBox'|translate}}">

</ng-select>

Typescript code

@ViewChild('vehicleInfoSelect') public vehicleInfoSelect: SelectComponent;

vehicleNumberTyped(text:String){
    console.log(text);
   // here i want to trim the text and
   // set the input field of the ng-select;
}

Any help would be great. Thanks..

score 0 · Answer 1 · answered Oct 12 '18 at 08:47

I guess this library does not provides this mechanism to do that. You can put some sort of hack for achieving this, by getting access to this private variable

this.behavior.filter(new RegExp(escapeRegexp(this.inputValue), 'ig'));

Which is available ng-select source code.

@ViewChild('vehicleInfoSelect') public vehicleInfoSelect: SelectComponent;

vehicleNumberTyped(text:String){
    console.log(text);
console.dir(this.vehicleInfoSelect);
}

If you can share the output of console.dir(this.vehicleInfoSelect); I can assist you further.

And the second way will be to dispatchEvent change event to input element of select, which will be more complex.

And the third way will be searching some other package which meets your requirement

Changing the input value of the ng-select component while user types in angular 2

1 Answers1