disable angular ng-select window

Question

We are using ng-select in a project and I'm facing the problem that I can't disable the ng-select window. Is it possible to disable it with native code or do I need to find some custom solution?

  <ng-select 
    #changeowner
    class="custom-owner"
    [placeholder]="leagueOwner.full_name"
    [clearSearchOnAdd]="true"
    (change)="changeLeagueOwner($event)"
    [clearable]="false"
    [virtualScroll]="true"
    [items]="adminLeagueMembers"
    (scrollToEnd)="onAdminLoadScrollEnd()"
    bindLabel="full_name">
</ng-select>

@Chellappan that's because you need a formControlName option set as stated here : https://github.com/ng-select/ng-select/issues/132 — Nasta, Jan 29 '19 at 08:39

score 20 · Accepted Answer · answered Jan 29 '19 at 08:45

20

As stated in other responses you can use the option

[disabled]="booleanValue"

However you will need a formControlName value set as well as described here.

You would get:

<!-- test-component.html -->
<ng-select [disabled]="myDisabledCondition" formControlName="myFormControl" 
...>
</ng-select>

answered Jan 29 '19 at 08:45

Nasta

819
8
21

1

@Bogdan Tushevskyi You have accepted this answer so does it really work in reactive form? – Vivek Jain Oct 01 '20 at 16:52
4

make sure you have ngModel attribute. Ex. `` Otherwise angular will complain that `disabled` cannot be used. – Piyapan Poomsirivilai Jan 06 '21 at 07:31

score 13 · Answer 2 · answered Jul 26 '19 at 13:34

With latest angular versions disabled attribute doesn't live well with formControlName. One way to disable ng-select with formControlName is to show readonly textbox instead of disabled dropdown:

<div *ngIf="!disabledCondition">
  <ng-select 
    #changeowner
    formControlName="owner"
    class="custom-owner"
    [placeholder]="leagueOwner.full_name"
    [clearSearchOnAdd]="true"
    (change)="changeLeagueOwner($event)"
    [clearable]="false"
    [virtualScroll]="true"
    [items]="adminLeagueMembers"
    (scrollToEnd)="onAdminLoadScrollEnd()"
    bindLabel="full_name">
  </ng-select>
</div>
<div *ngIf="disabledCondition">      
  <input formControlName="owner" class="form-control" type="text" readonly>
</div>

Inamur Rahman · Answer 3 · 2020-01-06T11:47:47.510

13

If you are using the Angular reactive form and trying to disable the ng-select using the following code then sorry it will not work in some case. If you are using formControlName then it will not work but work in [(ngModel)] case.

[disabled] = true

The best way to do this is by using reactive form control.

this.createReactiveform.controls['some_key'].disable(true);

edited Jan 06 '20 at 11:47

answered Jan 06 '20 at 11:37

Inamur Rahman

2,913
1
27
29

score 11 · Answer 4 · edited Jun 02 '20 at 03:40

11

If you are using reactForms, the correct way to disable inputs is to use:

 formGroup.get('controlName').disable()

edited Jun 02 '20 at 03:40

Muhammad Dyas Yaskur

6,914
10
48
73

answered Jun 01 '20 at 23:12

Renan Lima

111
1
2

score 5 · Answer 5 · answered Jun 04 '21 at 14:19

5

You should use [readonly] input

https://github.com/ng-select/ng-select#api

[readonly]  boolean     false   no  Set ng-select as readonly. Mostly used with reactive forms.

answered Jun 04 '21 at 14:19

marcosalpereira

319
3
5

That is worked for me. [disabled] did not work after the variable got updated. Thanks! – Pierre Nov 26 '21 at 01:18

score 3 · Answer 6 · answered Jul 31 '18 at 12:01

3

use [disabled]="true"

<ng-select 
    [disabled]="true"
    #changeowner
    class="custom-owner"
    [placeholder]="leagueOwner.full_name"
    [clearSearchOnAdd]="true"
    (change)="changeLeagueOwner($event)"
    [clearable]="false"
    [virtualScroll]="true"
    [items]="adminLeagueMembers"
    (scrollToEnd)="onAdminLoadScrollEnd()"
    bindLabel="full_name">
</ng-select>

answered Jul 31 '18 at 12:01

Krishna Rathore

9,389
5
24
48

4

i have this template parse error on this: Can't bind to 'disabled' since it isn't a known property of 'ng-select' – Bogdan Tushevskyi Jul 31 '18 at 12:57

score 3 · Answer 7 · answered Jun 30 '20 at 17:25

3

If you are using reactiveForms, the correct way to disable inputs is to use:

 formGroup.get('controlName').disable()

in case you need to empty the formcontrol

 formGroup.get('controlName').setValue("");

answered Jun 30 '20 at 17:25

Akitha_MJ

3,882
25
20

score 3 · Answer 8 · answered Dec 09 '21 at 14:09

3

adding [disabled]="true" did not work for me But setting [readOnly] to true did. Based on documentation that is a way to go with reactive forms:

[readonly] boolean false no Set ng-select as readonly. Mostly used with reactive forms.

answered Dec 09 '21 at 14:09

Test Salapet

51
3

score 2 · Answer 9 · answered Jul 31 '18 at 13:23

ng-select has native method which not include in official documentation - setDisabledState(boolean) So, i used

@ViewChild ('changeowner') changeOwnerRef: ElementRef;

and can use this method like this:

(<any>this.changeOwnerRef).setDisabledState(true);

score 1 · Answer 10 · answered Mar 19 '19 at 15:01

1

use disable attribute:

<ng-select 
   [disabled]="true">
</ng-select>

If you get Can't bind to 'disabled' since it isn't a known property of 'ng-select'. You have to reference FormsModule:

@NgModule({
   imports: [FormsModule, NgSelectModule]
})

answered Mar 19 '19 at 15:01

Marek Pavelek

1,097
12
12

score 0 · Answer 11 · answered Aug 03 '23 at 10:51

In some versions of Angular (e.g., version 13), the [disabled] attribute may not work correctly with the component. To disable the component in Angular version 13, you can use an alternative approach.

First, create a CSS class that disables the pointer-events:

.ng-select-disabled {
  pointer-events: none;
}

Next, in your component or template file, apply this class based on the value of the readOnly variable for example:

<ng-select 
    #changeowner
    class="custom-owner"
    [placeholder]="leagueOwner.full_name"
    [clearSearchOnAdd]="true"
    (change)="changeLeagueOwner($event)"
    [clearable]="false"
    [virtualScroll]="true"
    [items]="adminLeagueMembers"
    (scrollToEnd)="onAdminLoadScrollEnd()"
    bindLabel="full_name"
    [class.ng-select-disabled]="readOnly" <!-- Bind to the readOnly variable -->
    >
</ng-select>

disable angular ng-select window

11 Answers11