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

Question

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>

Possible duplicate of [Angular2 disable button](https://stackoverflow.com/questions/35535350/angular2-disable-button) — ConnorsFan, Mar 02 '18 at 14:39

score 57 · Answer 1 · edited Oct 06 '21 at 08:59

57

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

This demo used to correspond (it's now outdated) to the demo on the Angular GitHub page, 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.

edited Oct 06 '21 at 08:59

Yun

3,056
6
9
28

answered Mar 02 '18 at 14:41

moi_meme

9,180
4
44
63

1

This works here, but i the button for material do not show disabled style. When I view source this becomes ng-reflect-disabled, but if i manually change that to just disabled the view updates and angually looks disabled. Any idea how to make it work visually ? – Henrik Bøgelund Lavstsen Jul 05 '20 at 05:11

score 11 · Answer 2 · answered Mar 02 '18 at 14:38

11

use [disabled] atttribute with button

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

answered Mar 02 '18 at 14:38

Sajeetharan

216,225
63
350
396

The mat-raised-button by default brings some color to the background that really implies that the button is disabled. – Vibin Guevara Jun 03 '21 at 13:03

score 6 · Answer 3 · answered Nov 03 '18 at 17:05

6

Use [disabled] attribute

ts file

review_btn=true;

html file

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

answered Nov 03 '18 at 17:05

Dinesh Kumar

353
7
16

score 3 · Answer 4 · answered Dec 09 '19 at 15:43

Another alternative is to use a template reference variable and get the information from the MatSelect:


<mat-form-field class="example-full-width" #selectedFood>
  <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>
<button mat-stroked-button [disabled]="selectedFood.empty">
  Validate
</button>

See angular official documentation on template reference variables.

score 1 · Answer 5 · answered Jul 24 '19 at 06:45

1

html file

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

ts file

isNextButton = true;

setSecurity() { this.isNextButton = false;}

answered Jul 24 '19 at 06:45

Thai Mozhi Kalvi

523
5
5

score 0 · Answer 6 · answered Aug 30 '19 at 17:44

If you assign an ngModel to the mat-select, you can then check to see if that model has a value:

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

You can then check to see if a value has been selected in your button:

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

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

6 Answers6