web-dev-qa-db-ja.com

angular2での選択を無効にします

Angular2アプリを書いています。すべてのボタンと選択を無効にしてから有効にする必要があります。私のクラスフィールドbutDisabledを使用してそれを行いたいのですが、運がありません。私はこのコードを持っています：

 @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"}
  ];

}

選択を無効にするために{{butDisabled}}を使用できない理由がわかりません。何が悪いのですか？どうもありがとう

これが plunker です

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

あなただけにバインドすることができます[disabled]属性は次のようになります。

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

そして、コンポーネントで変数をブール値にします：

export class AppComponent {
    butDisabled: boolean = true;

動作 Plunker 使用例

25
rinukkusu

あなたの場合は、マークアップを使用するだけで十分です[disabled]="butDisabled"、ただし、注目に値しますこのアプローチはリアクティブフォームでは機能しません。ここで、コード内のコントロールを無効/有効にします。

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

単一のクラスを追加または削除する場合は、 Angular2 の組み込みヘルパーを使用することをお勧めします。ただし、すでに述べたように、クラスでの選択の無効化は機能しません。 Angular2には、属性用の別のヘルパー here もあります。属性機能を使用すると、HTMLに対してこれを行うことができます。

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

そしてこれはあなたのクラスのために

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

これはAngular 8プロジェクトで機能します。お役に立てば幸いです。

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

選択を無効にするときは、ボタンを無効にするときよりも少し進んでいるため、disabled属性を使用する必要があります。 @rinukkusuと同様に、[disabled]="butDisabled"の使用をお勧めします

ここに私が作成した作業中の Plunker があります

1
Jarod Moser

単純なクラスでは選択を無効にすることはできません。 Bootstrapは、シンプルなデザインを提供するクラスを提供しますが、ほとんどのコンポーネントには十分ではありません。最初の選択の場合と同様に、無効化された属性をコンポーネントに追加する必要があります単純なng2バインディング。

これが実際の例です

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