Как включить и отключить матовую кнопку на основе выбранной формы

Это моя матовая кнопка:

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

Ответ 1

если вы посмотрите на Angular Material Demos (кнопка), которая является более старой версией демонстрации углового метраила, есть кнопка, выполняющая это.

Это демо соответствует (раньше оно было устаревшим) демо в andgulr github. см. github.com - Угловой материал - src/demo-app/button

Вы можете просто использовать:

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

где isDisabled - логическое определение в вашем компоненте.

Ответ 2

использовать [disabled] atttribute с помощью кнопки

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

Ответ 3

Использовать атрибут [disabled]

TS файл

review_btn=true;

HTML файл

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

Ответ 4

HTML файл

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

TS файл

isNextButton = true;

setSecurity() { this.isNextButton = false;}

Ответ 5

Если вы назначите 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>