Question

我们正在porject中使用ng-select，现在我正面临一个问题，即我无法禁用ng-select窗口。是否可以使用本机代码禁用它，或者我需要找到一些自定义解决方案？

<div class="box green">I'm green!</div>
<div class="box blue">I'm blue!</div>
<div class="box orange">I'm orange!</div>

Answer 1

如果您使用reactForms，则禁用输入的正确方法是使用：

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

Answer 2

使用[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>

Answer 3

如其他回复所述，您可以使用选项

[disabled]="booleanValue"

但是，您将需要设置formControlName值以及描述的here。

您将获得：

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

Answer 4

如果您使用的是reactForms，则禁用输入的正确方法是使用：

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

以防您需要清空表单控件

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

Answer 5

ng-select具有本机方法，未包含在官方文档中- setDisabledState(boolean) 所以，我用

@ViewChild ('changeowner') changeOwnerRef: ElementRef;

并且可以使用这种方法：

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

Answer 6

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]
})

Answer 7

在最新的角度版本中，disabled属性不能很好地与formControlName配合使用。使用ng-select禁用formControlName的一种方法是显示readonly文本框，而不是禁用下拉列表：

<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>

Answer 8

你应该使用[只读]输入

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

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

禁用角度ng-select窗口

8 个答案: