如何将 Angular Material Stepper 的 matStepperNext 按钮显示为 enabled/disabled？

Question

在 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 类 时启用。我怎样才能完成这项工作？

Answer 1

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

按钮的

CSS：

button.disabled {
  pointer-events: none;
}

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