web-dev-qa-db-ja.com

Angular 4 select disabled is not working

Angular 4.でselectを無効にします。以下のようなコードを書きましたが、selectは無効になりません。

コンポーネント内：

import { FormBuilder, Validators, FormGroup } from '@angular/forms';    

this.eventForm = this.formBuilder.group({
    // ... some codes ...
    'state': [true, Validators.required],
    'stepStrengh': [10, Validators.nullValidator]
});

HTMLの場合：

<input type="radio" formControlName="state" [value]="true"/> Enable Step
<input type="radio" formControlName="state" [value]="false"/> Disable Step

<select formControlName="stepStrengh" [disabled]="!eventForm.get('timeslots').value">
  <option [ngValue]="10">10 steps</option>
  <option [ngValue]="15">15 steps</option>
</select>

[disabled]="true"をoptionタグに追加すると、そのオプションタグは無効になりますが、selectタグ自体を無効にしたいです。

そして、私はこのようにしてみました-

<select formControlName="stepStrengh" disabled="{{state ? '': 'disabled'}}">

しかし、状態変数をtrue->falseまたはfalse->trueから変更すると、これも機能しません。

angulardrop-down-menu
8
Shine Han

いくつかのドキュメントやその他のものを読んだ後、このアプローチが私のために働いていることがわかりました

<select [attr.disabled]="state ? '' : null" formControlName="stepStrengh" >

それが役に立てば幸い。

stackblitzへのリンクです

11
Kraken

テンプレート駆動型の方法とリアクティブフォーム型の方法を組み合わせた種類。 1つのアプローチを選択するのが最善です。この場合、TypeScriptで行います：control.disable（）

具体的には、次のようになります：

this.eventForm.get（ 'stepStrengh'）。disable（）;

これは、最初のフォームのセットアップ後に設定することに注意してください。

1
Andrew Junior Howard