如何解决如何将 Angular Material Stepper 的 matStepperNext 按钮显示为启用/禁用?
在 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>
我想将用 <button>
修饰的 matStepperNext
显示为在表单出现错误时禁用,而在不使用 CSS 类时启用。我怎样才能完成这项工作?
解决方法
<button matStepperNext [ngClass]="{'disabled': formGroup.get('code').hasError(error)}">Continue</button>
按钮的CSS:
button.disabled {
pointer-events: none;
}
我仍然建议使用按钮上的 disabled
属性来处理它。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。