1

In an Angular 11 project I have an Angular Material Stepper control. My first step contains a form much like this:

<mat-horizontal-stepper [linear]="true" #stepper>
    <mat-step [stepControl]="step.formGroup">
        <form [formGroup]="formGroup">
            <label for="code">Enter code</label>
            <input name="code" formControlName="code" required />
            <button matStepperNext>Continue</button>
        </form>
    </mat-step>
    <mat-step>
        <!-- step 2 -->
    </mat-step>
</mat-horizontal-stepper>

I would like to show the <button> that's decorated with matStepperNext as disabled when the form has errors and enabled when it doesn't using CSS classes. How can I get this done?

urig
  • 16,016
  • 26
  • 115
  • 184

1 Answers1

2
<button matStepperNext [ngClass]="{'disabled': formGroup.get('code').hasError(error)}">Continue</button>

CSS of the button:

button.disabled {
  pointer-events: none;
}

I would still suggest to handle it using disabled attribute on the button.

Mir entafaz Ali
  • 927
  • 6
  • 13
  • thank you. How can I use the button's `disabled` attribute inside the `[ngClass] ` attribute? – urig Apr 28 '21 at 08:04
  • I don't think it is possible to add `disabled` attribute inside `[ngClass]`. The other solution I was talking about was something like this `` – Mir entafaz Ali Apr 28 '21 at 10:13
  • the ` – urig Apr 28 '21 at 15:10