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

Reputation: 367

disable select in angular2

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

Upvotes: 21

Views: 119777

Answers (8)

Devesh Choudhary
Devesh Choudhary

Reputation: 7

You may try this one. It will not show the console.warning also
<select id="segType" formControlName="segment" (focus)="uccDetals(i)" (change)="changeSegmentss($event, i)" class="form-control td" [attr.disabled]="selectDisable ? 'disabled' : null">

Upvotes: 0

IonicMan
IonicMan

Reputation: 892

Even though it is said to use [disabled], it didn't work for me. I didn't figure it out.

But actually <select> and <option> are html elements, not angular elements. And to disable those elements in the original way, you can simply use disabled in the <select> tag.

To differentiate now, you can use a ng-container like this:

<ng-container *ngIf="element.isEditable === true; else notEditable"> 
    <select> 
        <option>
            ...
        </option>
    </select>
</ng-container>

<ng-template #notEditable> 
    <select disabled> 
        <option>
            ...
        </option>
    </select>
</ng-template>

Upvotes: 1

Karthikeyan Vellingiri
Karthikeyan Vellingiri

Reputation: 1330

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

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

Upvotes: 12

Dan Simon
Dan Simon

Reputation: 834

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

Upvotes: 5

Matt
Matt

Reputation: 1544

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

Upvotes: 45

Polochon
Polochon

Reputation: 2219

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;

  }
}

Upvotes: 1

Jarod Moser
Jarod Moser

Reputation: 7338

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

Upvotes: 1

Maximilian Riegler
Maximilian Riegler

Reputation: 23506

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

Upvotes: 38

Related Questions