How to enable and disable a mat-button based on a select form

Cap Barracudas picture Cap Barracudas · Mar 2, 2018 · Viewed 64.8k times · Source

This is my mat-button:

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

How can I control it and make it disabled or not based on whether a select form is emtry or not?

Here is my field form:

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

Answer

moi_meme picture moi_meme · Mar 2, 2018

if you look at Angular Material Demos (button) which is an older version of angular metrail demo, there is a button performing this.

This demo corresponds (used to now it's outdated) to the demo in andgulr github. see: github.com - Angular Material - src/demo-app/button

you can simply use:

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

where isDisabled is a boolean define in your component.