web-dev-qa-db-ja.com

disable angular ng-selectウィンドウ

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

他の応答で述べられているように、オプションを使用できます

[disabled]="booleanValue"

ただし、 here の説明と同様に、formControlName値を設定する必要があります。

あなたは得るでしょう:

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

使用する [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>
3
Krishna Rathore

最新のangular=バージョンdisabled属性はformControlNameではうまくいきません。formControlNameng-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>
2

_ng-select_には、公式ドキュメントに含まれていないネイティブメソッドがあります-setDisabledState(boolean)だから、私は使用しました

_@ViewChild ('changeowner') changeOwnerRef: ElementRef;
_

この方法は次のように使用できます。

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

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]
})
1
Marek Pavelek