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

Solution 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

Solution 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();

Solution 3

This works for me on Angular 8 project. Hope it helps.

<select [attr.disabled]="!name.valid ? 'disabled' : null" formControlName="gender">

Solution 4

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

Solution 5

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

View more solutions

Comments

[The Red Pea]

User may see message "It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors."

[Shekhar Patel]

but if we disabled like this, we didn't get model value while submitting the form, Any idea on this?

[rinukkusu]

@shekharpatel Better to ask a new question :)

[trebor74]

After playing around with this it is the best option if you need to dynamically change whether control is disabled and as the @TheRedPea stated avoids the 'changed after checked errors'.

[Mahdi]

When I use it, Get warning in console. It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true ...

[rinukkusu]

@Mahdi check out the answer from Matt below