web-dev-qa-db-fra.com

désactiver angular ng-fenêtre de sélection

Nous utilisons ng-select dans porject et je suis confronté au problème maintenant, je ne peux pas désactiver la fenêtre ng-select. Est-il possible de le désactiver avec du code natif ou dois-je trouver une solution personnalisée?

  <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>
angularangular-ngselect
8
Bogdan Tushevskyi

Comme indiqué dans d'autres réponses, vous pouvez utiliser l'option

[disabled]="booleanValue"

Cependant, vous aurez besoin d'un ensemble de valeurs formControlName ainsi que décrit ici .

Vous obtiendriez:

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

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

Avec le dernier attribut angular versions disabled ne fonctionne pas bien avec formControlName. Une façon de désactiver ng-select avec formControlName doit afficher readonly zone de texte au lieu de la liste déroulante désactivée:

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

ng-select A une méthode native qui ne figure pas dans la documentation officielle - setDisabledState(boolean) Donc, j'ai utilisé

@ViewChild ('changeowner') changeOwnerRef: ElementRef;

et peut utiliser cette méthode comme ceci:

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

utilisez l'attribut disable:

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

Si vous obtenez Can't bind to 'disabled' since it isn't a known property of 'ng-select'. Vous devez référencer FormsModule:

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