disable select in angular2

Question

I am writing angular2 app. I need all my buttons and select with be disabled and then I need to enable them. I want to do that by using my class field butDisabled but with no luck. I have this 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"}
  ];

}

I don't understand why I can't use the {{butDisabled}} to disable the select. What Am I doing wrong? Thanks a lot

here is a plunker

Answer 1

You could just bind to the [disabled] attribute like so:

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

And in your component make the variable a boolean:

export class AppComponent {
    butDisabled: boolean = true;

---

Working Plunker for example usage

Answer 2

For your case it is enough to use markup [disabled]="butDisabled", but it is worth noting that this approach won't work for reactive forms, where you disable/enable controls in code:

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

Answer 3

If you want to add/remove a single class, I would recommend using the built-in helpers from Angular2. However, as it has already been stated, disabling a select with a class won't work. Angular2 also has another helper for attributes here. Using the attribute feature you can do this for your HTML.

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

And this for your class

export class AppComponent {
  controlEnabled:boolean = true;
}

Answer 4

When disabling a select there is a little more going on then when disabling a button and as such you would need to use the disabled attribute. Similar to what @rinukkusu did, I would suggest using the [disabled]="butDisabled"

Here is the working Plunker that I created

Answer 5

you can't disabled a select with a simple class. Bootstrap provides a class that provides a simple design but it's not enough for the most of the components. Like you do for your first select, you have to add the disabled attribute to your component by adding a simple ng2 binding.

Here is a working example

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;

  }
}