如何将 Angular Material Stepper 的 matStepperNext 按钮显示为启用/禁用？

【问题标题】：How to show Angular Material Stepper's matStepperNext button as enabled/disabled?如何将 Angular Material Stepper 的 matStepperNext 按钮显示为启用/禁用？
【发布时间】：2021-04-28 06:15:38
【问题描述】：

在 Angular 11 项目中，我有一个 Angular Material Stepper 控件。我的第一步包含一个很像这样的表单：

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

我想将带有matStepperNext 装饰的<button> 显示为在表单出现错误时禁用，并在不使用CSS 类时启用。我怎样才能完成这项工作？

【问题讨论】：

标签： angular angular-material angular-material-stepper

【解决方案1】：

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

按钮的 CSS：

button.disabled {
  pointer-events: none;
}

我仍然建议使用按钮上的disabled 属性来处理它。

【讨论】：

谢谢。如何在[ngClass] 属性中使用按钮的disabled 属性？
我认为不可能在[ngClass] 中添加disabled 属性。我正在谈论的另一个解决方案是这样的<button matStepperNext [disabled]="formGroup.get('code').hasError(error)">Continue</button>
<button> 被步进器本身禁用。发生这种情况时，我什至看不到它的 disabled 属性。我想知道如何根据按钮是启用还是禁用来设置ngClass。