web-dev-qa-db-ja.com

選択フォームに基づいてマットボタンを有効または無効にする方法

これは私のマットボタンです：

<button class="example-20-width" mat-raised-button disabled>Edit Client</button>

選択フォームがemtryであるかどうかに基づいて、どのように制御し、無効にするかを設定できますか？

これが私のフィールドフォームです。

<mat-form-field class="example-full-width">
                    <mat-select  placeholder="Select customer">
                      <mat-option *ngFor="let food of books.data" 
                          [value]="food.company">
                        {{food.company}}
                      </mat-option>
                      <mat-option >
                        </mat-option>
                    </mat-select>
   </mat-form-field>
angularangular-material2
17
Cap Baracudas

古いバージョンのangular metrailデモである Angular Material Demos（ボタン） を見ると、これを実行するボタンがあります。

このデモは、andgulr githubのデモに対応しています（現在は古くなっています）。参照： github.com-Angular Material-src/demo-app/button

単に使用できます：

<button mat-button [disabled]="isDisabled">

isDisabledは、コンポーネントで定義するブール値です。

23
moi_meme

ボタンで[無効]属性を使用する

<button class="example-20-width"  [disabled]="true" mat-raised-button disabled>Edit Client</button>
3
Sajeetharan

[無効]属性を使用

tsファイル

review_btn=true;

htmlファイル

  <button mat-raised-button [disabled]="review_btn" color="primary" mat-button (click)="reviewCreate()">Save</button>
2
Dinesh Kumar

NgModelをmat-selectに割り当てると、そのモデルに値があるかどうかを確認できます。

                <mat-select  placeholder="Select customer" [(ngModel)]="book">
                  <mat-option *ngFor="let food of books.data" 
                      [value]="food.company">
                    {{food.company}}
                  </mat-option>
                  <mat-option >
                    </mat-option>
                </mat-select>

次に、ボタンで値が選択されているかどうかを確認できます。

<button class="example-20-width" mat-raised-button [disabled]="!book">Edit Client</button>
0
Timmah

htmlファイル

<button mat-stroked-button color="primary" [disabled]="isNextButton" (click)="setSecurity()">Next</button>

tsファイル

isNextButton = true;

setSecurity() { this.isNextButton = false;}
0
Thai Mozhi Kalvi