禁用 angular 共 select window

Question

我们在项目中使用 ng-select，但我遇到了无法禁用 ng-select window 的问题。是否可以使用本机代码禁用它，或者我是否需要找到一些自定义解决方案？

  <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

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

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

@ViewChild ('changeowner') changeOwnerRef: ElementRef;

并且可以像这样使用这个方法：

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

Answer 3

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

[disabled]="booleanValue"

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

你会得到：

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

Answer 4

使用禁用属性：

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

如果你得到Can't bind to 'disabled' since it isn't a known property of 'ng-select'.你必须参考FormsModule：

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

Answer 5

最新 angular 版本 disabled 属性与 formControlName 不兼容。使用 formControlName 禁用 ng-select 的一种方法是显示 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 6

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

[disabled] = true

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

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

Answer 7

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

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

Answer 8

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

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

如果您需要清空表单控件

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

Answer 9

你应该使用[只读]输入

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

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

Answer 10

添加 [disabled]="true" 对我不起作用但是将 [readOnly] 设置为 true 就可以了。基于文档，这是一种使用反应形式的方法：

[readonly] boolean false 否将 ng-select 设置为只读。主要与反应形式一起使用。

禁用 angular 共 select window

disable angular ng-select window

angular-ngselect

angular