javascript - What is the alternative of [clearable] in ng-select - Stack Overflow

admin管理员组

文章数量:1025207

I do not want to use the [clearable] in ng-select for leakage of my space. Instead of [clearable] I want to use only [clearOnBackspace] but when I write [clearable] = "false" and [clearOnBackspace] = "true" it does not work.

enter code here

    <ng-select [items]="cities"
               bindLabel="name"
               placeholder="Select city"
               [(ngModel)]="selectedCity"
               [clearable]="false"
               [clearOnBackspace] = "true"
               [excludeGroupsFromDefaultSelection] = "true">
    </ng-select>

I do not want to use the [clearable] in ng-select for leakage of my space. Instead of [clearable] I want to use only [clearOnBackspace] but when I write [clearable] = "false" and [clearOnBackspace] = "true" it does not work.

enter code here

    <ng-select [items]="cities"
               bindLabel="name"
               placeholder="Select city"
               [(ngModel)]="selectedCity"
               [clearable]="false"
               [clearOnBackspace] = "true"
               [excludeGroupsFromDefaultSelection] = "true">
    </ng-select>

• javascript
• angular7
• angular-ngselect

Share Improve this question Follow edited Jan 28, 2021 at 18:54 Kamil Naja 6,74077 gold badges3737 silver badges5252 bronze badges asked Feb 4, 2019 at 5:13 SabbirSabbir 32755 silver badges1414 bronze badges 4

• if 'clearable' property is set to false, and clearOnBackspace is set to true, user can remove single item using backspace button. if (this.filterValue || (!multiple && !this.clearable) || !this.clearOnBackspace || !this.hasValue) { template example: <ng-select> (add)=... (remove)=... [multiple]="true" [clearable]="false" [clearOnBackspace]="true" </ng-select> you can hide clear button simply by css – Mebin Joe Commented Feb 4, 2019 at 5:24
• use [clearable]="true" it will be cleared on backspace only – Just code Commented Feb 4, 2019 at 5:36
• The user selects only a single value. So [multiple]="true" not needed. Yap I can remove the cross button using CSS but I want to handle it by JavaScript. – Sabbir Commented Feb 4, 2019 at 5:36
• @Just Code if i make [clearable]="true" it also shows the cross icon. I do not allow it for my space lackage. – Sabbir Commented Feb 4, 2019 at 5:39

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

If you do [clearable]="false" it will disallow to clear the selection.

you can use css to hide the close icon. like this

.ng-clear-wrapper{
  display: none;
}

and keep ng-select as it is

Demo

<ng-select [items]="cities"
               bindLabel="name"
               placeholder="Select city"
               [(ngModel)]="selectedCity"
               [clearable]="true"
               [clearOnBackspace] = "true"
               [excludeGroupsFromDefaultSelection] = "true">

infact you do not need [clearOnBackspace] = "true"

I do not want to use the [clearable] in ng-select for leakage of my space. Instead of [clearable] I want to use only [clearOnBackspace] but when I write [clearable] = "false" and [clearOnBackspace] = "true" it does not work.

enter code here

    <ng-select [items]="cities"
               bindLabel="name"
               placeholder="Select city"
               [(ngModel)]="selectedCity"
               [clearable]="false"
               [clearOnBackspace] = "true"
               [excludeGroupsFromDefaultSelection] = "true">
    </ng-select>

I do not want to use the [clearable] in ng-select for leakage of my space. Instead of [clearable] I want to use only [clearOnBackspace] but when I write [clearable] = "false" and [clearOnBackspace] = "true" it does not work.

enter code here

    <ng-select [items]="cities"
               bindLabel="name"
               placeholder="Select city"
               [(ngModel)]="selectedCity"
               [clearable]="false"
               [clearOnBackspace] = "true"
               [excludeGroupsFromDefaultSelection] = "true">
    </ng-select>

• javascript
• angular7
• angular-ngselect

Share Improve this question Follow edited Jan 28, 2021 at 18:54 Kamil Naja 6,74077 gold badges3737 silver badges5252 bronze badges asked Feb 4, 2019 at 5:13 SabbirSabbir 32755 silver badges1414 bronze badges 4

• if 'clearable' property is set to false, and clearOnBackspace is set to true, user can remove single item using backspace button. if (this.filterValue || (!multiple && !this.clearable) || !this.clearOnBackspace || !this.hasValue) { template example: <ng-select> (add)=... (remove)=... [multiple]="true" [clearable]="false" [clearOnBackspace]="true" </ng-select> you can hide clear button simply by css – Mebin Joe Commented Feb 4, 2019 at 5:24
• use [clearable]="true" it will be cleared on backspace only – Just code Commented Feb 4, 2019 at 5:36
• The user selects only a single value. So [multiple]="true" not needed. Yap I can remove the cross button using CSS but I want to handle it by JavaScript. – Sabbir Commented Feb 4, 2019 at 5:36
• @Just Code if i make [clearable]="true" it also shows the cross icon. I do not allow it for my space lackage. – Sabbir Commented Feb 4, 2019 at 5:39

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

If you do [clearable]="false" it will disallow to clear the selection.

you can use css to hide the close icon. like this

.ng-clear-wrapper{
  display: none;
}

and keep ng-select as it is

Demo

<ng-select [items]="cities"
               bindLabel="name"
               placeholder="Select city"
               [(ngModel)]="selectedCity"
               [clearable]="true"
               [clearOnBackspace] = "true"
               [excludeGroupsFromDefaultSelection] = "true">

infact you do not need [clearOnBackspace] = "true"

本文标签： javascriptWhat is the alternative of clearable in ngselectStack Overflow