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>
他の応答で述べられているように、オプションを使用できます
[disabled]="booleanValue"
ただし、 here の説明と同様に、formControlName値を設定する必要があります。
あなたは得るでしょう:
<!-- test-component.html -->
<ng-select [disabled]="myDisabledCondition" formControlName="myFormControl"
...>
</ng-select>
使用する [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>
最新のangular=バージョンdisabled
属性はformControlName
ではうまくいきません。formControlName
でng-select
を無効にする1つの方法は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>
_ng-select
_には、公式ドキュメントに含まれていないネイティブメソッドがあります-setDisabledState(boolean)
だから、私は使用しました
_@ViewChild ('changeowner') changeOwnerRef: ElementRef;
_
この方法は次のように使用できます。
_(<any>this.changeOwnerRef).setDisabledState(true);
_
disable属性を使用します。
<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]
})