web-dev-qa-db-fra.com

désactiver la sélection dans angular2

J'écris angular2 app . J'ai besoin de tous mes boutons et sélectionnez avec être désactivé et puis je dois les activer. Je veux faire cela en utilisant mon champ de classe mais Désactivé mais sans chance ..__ J'ai ce code:

 @Component({
  selector: 'my-app',
  template:`
    <h1>Disable Enable</h1>
    <h2> this is a disabled select </h2>
    <select type="number" [(ngModel)]="levelNum" (ngModelChange)="toNumber()" disabled>
      <option *ngFor="let level of levels" [ngValue]="level.num">{{level.name}}</option>
    </select>
     <h2> this is a disabled button </h2>
    <button type="button" class="btn btn-default {{butDisabled}}">Disabled</button>

    <h2> Why can't I disable the select the same way? </h2>
    <select type="number" [(ngModel)]="levelNum" (ngModelChange)="toNumber()" class="{{butDisabled}}">
      <option *ngFor="let level of levels" [ngValue]="level.num">{{level.name}}</option>
    </select>


  `,
})
export class AppComponent {
  butDisabled = "disabled";
  levelNum:number;
  levels:Array<Object> = [
      {num: 0, name: "AA"},
      {num: 1, name: "BB"}
  ];

}

Je ne comprends pas pourquoi je ne peux pas utiliser le {{butDisabled}} pour désactiver la sélection . Qu'est-ce que je fais mal?

voici un plunker

drop-down-menutwitter-bootstrap-3angular
3
Noa

Vous pouvez simplement vous lier à l'attribut [disabled] comme suit:

<button type="button" class="btn btn-default" [disabled]="butDisabled">Disabled</button>

<select type="number" [(ngModel)]="levelNum" (ngModelChange)="toNumber()" [disabled]="butDisabled">
  <option *ngFor="let level of levels" [ngValue]="level.num">{{level.name}}</option>
</select>

Et dans votre composant, faites de la variable un booléen:

export class AppComponent {
    butDisabled: boolean = true;

Travailler Plunker par exemple usage

25
rinukkusu

Dans votre cas, il suffit d'utiliser le balisage [disabled]="butDisabled", mais il convient de noter que cette approche ne fonctionnera pas pour les formulaires réactifs , où vous désactivez/activez les contrôles dans le code:

this.form.get('myFormControlName').enable();
this.form.get('myFormControlName').disable();
20
Matt

Si vous souhaitez ajouter/supprimer une seule classe, je vous recommande d'utiliser les aides intégrées de Angular2 . Cependant, comme cela a déjà été dit, désactiver une sélection avec une classe ne fonctionnera pas. Angular2 a également un autre assistant pour les attributs ici . En utilisant la fonctionnalité d'attribut, vous pouvez le faire pour votre code HTML.

<select type="number" [attr.disabled]="controlEnabled"></select>

Et ceci pour votre classe

export class AppComponent {
  controlEnabled:boolean = true;
}
5
Dan Simon

Lorsque vous désactivez une sélection, il y a un peu plus de temps que lorsque vous désactivez un bouton, vous devez donc utiliser l'attribut disabled. Semblable à ce que @rinukkusu a fait, je suggère d'utiliser le [disabled]="butDisabled"

Voici le travail Plunker que j'ai créé

1
Jarod Moser

vous ne pouvez pas désactiver une sélection avec une classe simple. Bootstrap fournit une classe simple, mais qui ne suffit pas pour la plupart des composants . Comme pour votre première sélection, vous devez ajouter l'attribut disabled à votre composant en ajoutant une simple liaison ng2.

Voici un exemple de travail

https://plnkr.co/edit/z1aeTAPsGA6HLip0RCkM?p=preview

//our root app component
import {Component, Directive, Output, EventEmitter, Input, SimpleChange} from 'angular2/core'
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';

@Component({
  selector: 'my-app',
  template:`
    <h1>Disable Enable</h1>
    <select type="number" [disabled]="disabled">
      <option *ngFor="let level of levels" [ngValue]="level.num">{{level.name}}</option>
    </select>
    <button (click)='toggle()'> disable/enable </button>  


  `,
})
export class AppComponent {
  disabled = true;
  levels = [{num:1, name: 'test'}];

  toggle() {
    this.disabled = !this.disabled;

  }
}
1
Polochon