angular - 禁用角度 ng-select 窗口

Question

我们在一个项目中使用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>

score 15 · Accepted Answer

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

[disabled]="booleanValue"

但是，您将需要一个 formControlName 值集以及此处所述。

你会得到：

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

score 12 · Accepted Answer

使用最新的角度版本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>

score 9 · Accepted Answer

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

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

score 9 · Accepted Answer

如果您正在使用 Angular 响应式表单并尝试使用以下代码禁用ng-select，那么抱歉，它在某些情况下不起作用。如果您使用的是formControlName，那么它将不起作用，但在[(ngModel)]情况下起作用。

[disabled] = true

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

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

score 3 · Accepted Answer

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

score 3 · Accepted Answer

您应该使用 [readonly] 输入

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

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

score 3 · Accepted Answer

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

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

如果您需要清空表单控件

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

score 2 · Accepted Answer

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

@ViewChild ('changeowner') changeOwnerRef: ElementRef;

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

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

score 1 · Accepted Answer

使用禁用属性：

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

score 1 · Accepted Answer

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

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

angular - 禁用角度 ng-select 窗口

10 回答 10

Related

Reference