javascript - MatStepper 如何触发一个步骤的错误状态?
问题描述
我正在我的一个组件中实现一个,如果我在属性存在mat-horizontal-stepper
时从它移动,我试图让错误状态显示在一个步骤上,但这没有发生。[completed]
false
我不确定使用该completed
物业或类似的东西是否有一些限制;这就是我到目前为止所拥有的:
组件的 HTML
<mat-horizontal-stepper linear #auditStepper>
<mat-step label="Choose a Company" [completed]="selectionClient.selected.length > 0">
</mat-step>
<mat-step label="Select a PPC Account" errorMessage="Select an Account" [completed]="selectionPPC.selected.length > 0">
</mat-step>
<mat-step label="Set Your Targets">
</mat-step>
</mat-horizontal-stepper>
组件的 TS
@Component({
selector: 'app-new-audit',
templateUrl: './new-audit.component.html',
styleUrls: ['./new-audit.component.scss'],
providers: [
{
provide: STEPPER_GLOBAL_OPTIONS,
useValue: { showError: true }
}
]
})
在上面的代码中,我只提供了重要的东西;但是如果我正确地遵循了 Angular Material 文档,我需要做的是添加providers
到组件(或我的主应用程序模块)中,就是这样?
因此,例如,如果我进入第 2 步但保持completed
条件为假,然后移至另一个步骤,它应该会触发错误,因为该步骤不再处于活动状态但也未完成。
我只是想了解一切是如何工作的,因为我没有使用反应形式或任何实际用于此步进器的形式,因为我正在使用 MatTable 代替;我只需要用户从表中选择一行(通过 MatTable 的选择功能),如果选择数组有一个元素,那么我可以将该步骤视为“完成”并启用移动到下一步。
Stackblitz 演示 https://stackblitz.com/edit/angular-khyu8u
编辑:
FormGroup
如果我对步骤使用 a和属性,则错误状态可以正常工作[stepControl]
,但我需要它而不需要表单。
解决方案
有专门的方法描述了显示错误所需的内容:
private _getDefaultIndicatorLogic(step: CdkStep, isCurrentStep: boolean): StepState {
if (step._showError && step.hasError && !isCurrentStep) {
return STEP_STATE.ERROR;
}
step._showError
来自STEPPER_GLOBAL_OPTIONS
您在提供者中定义的step.hasError
包括最有趣的部分
以下是所有定义:
@Input()
get hasError(): boolean {
return this._customError == null ? this._getDefaultError() : this._customError;
}
set hasError(value: boolean) {
this._customError = coerceBooleanProperty(value);
}
private _getDefaultError() {
return this.stepControl && this.stepControl.invalid && this.interacted;
}
如您所见,hasError 返回true
if
1)我们有stepControl
无效的状态和当前步骤交互
2) 我们传递hasError
返回 true 的 Input 道具
!isCurrentStep
表示只有在您执行其他步骤时才会显示错误
因此,您可以hasError
使用自定义逻辑将属性传递给步骤,例如:
<mat-step ... #step [hasError]="step.interacted"
推荐阅读
- python-3.x - 在 Google Colab 的 numpy 数组中加载上传到驱动器上的图像数据
- ios - 如何在 iOS 14 上仅获取具有授予访问权限的资产?
- mysql - 首先选择最旧的数据
- android - 图表中间的 MPAndroidChart 中心视图
- excel - 按类别透视表
- dynamics-crm - executionContext 与 primaryControl
- excel - VB代码不影响报表,如何解决?
- c# - C# Type.GetFields 基于环境的不同顺序
- ngrx - NgRx 如何从另一个模块启动功能模块
- amazon-web-services - OpenVPN 客户端到 SSH 到 EC2 私有实例