web-dev-qa-db-ja.com

2つの条件でangular 2のボタンを無効にする

これはangular 2で可能ですか？

<button type="submit" [disabled]="!validate && !SAForm.valid">Add</button>

両方の条件が当てはまる場合、ボタンが有効になることを期待しています。

私はすでに上記のコードを試しましたが、期待どおりに機能していません。

htmlangulartypescript
30
MariaJen

代わりにORが必要なようです：

<button type="submit" [disabled]="!validate || !SAForm.valid">Add</button>

これは、検証されていない場合、またはSAForm.validでない場合、ボタンを無効にします。

70
DeborahK

Component.tsで変数を宣言し、それを何らかの値に初期化します

 buttonDisabled: boolean;

  ngOnInit() {
    this.buttonDisabled = false;
  }

.htmlまたはテンプレートに、次のコードを配置できます。

<button disabled="{{buttonDisabled}}"> Click Me </button>

buttonDisabled変数の値を変更することで、ボタンを有効/無効にすることができます。

5
Vishal Hulawale

他の答えに加えて、この推論はthe De Morganの法則としても知られていることを指摘したいと思います。実際にはプログラミングよりも数学の方が重要ですが、すべてのプログラマーが知っておくべき基本的なものです。

問題は次のように始まりました。

enabled  = A and B
disabled = not ( A and B )

これまでのところは良いですが、さらに一歩進んでブレースを削除しようとしました。 and/&&をor/||に置き換える必要があるため、これは少し注意が必要です。

not ( A and B ) = not(A) OR not(B)

または、より数学的な表記で：

enter image description here

条件を単純化するか、確率を扱うときは常に、この法則を念頭に置いています。

4
bvdb

次のように三項演算子を使用できます。[disabled]操作に対して内部的にtrueまたはfalseが必要です。

<button type="button" 
  [disabled]="(testVariable1 != 0 || testVariable2!=0)? true:false"
  mat-button>Button</button>
0
Sarjerao Ghadage