禁用角度ng-select窗口

Question

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

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

Answer 1

使用最新的 angular 版本disabled属性与formControlName. 禁用ng-selectwith 的一种方法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 2

如其他回应所述，您可以使用

[disabled]="booleanValue"

但是，您将需要设置formControlName值以及此处所述的值。

您将获得：

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

Answer 3

如果您正在使用 Angular 反应形式并尝试使用以下代码禁用ng-select，那么很抱歉在某些情况下它不起作用。如果您使用formControlName那么它不会工作，但在[(ngModel)]情况下工作。

[disabled] = true

最好的方法是使用反应式表单控件。

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

Answer 4

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

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

Answer 5

您应该使用[只读]输入

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

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