Question

我正在其中一个组件中实现mat-horizontal-stepper，并且如果我在[completed]属性为{{1 }}，但是这没有发生。

我不确定使用false属性或类似属性是否存在某些限制；这是我到目前为止的内容：

组件的HTML

completed

组件的TS

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

在上面的代码中，我仅提供重要的内容；但是，如果我正确地遵循了Angular Material文档，我需要做的就是将@Component({ selector: 'app-new-audit', templateUrl: './new-audit.component.html', styleUrls: ['./new-audit.component.scss'], providers: [ { provide: STEPPER_GLOBAL_OPTIONS, useValue: { showError: true } } ] })添加到组件（或我的主App Module）中，就是这样吗？

因此，例如，如果我进入第2步，但保持providers条件为假，然后再移至另一步，则该错误将触发错误，因为该步骤不再有效，但也没有完成。

由于我没有使用反应性形式或步进器实际上没有任何形式，因为我正在使用MatTable，所以我只是想了解一切。我只需要用户从表中选择一行（通过MatTable的选择功能），如果选择数组具有一个元素，那么我可以将这一步视为“完成”并允许进行下一步。

Stackblitz演示 https://stackblitz.com/edit/angular-khyu8u

编辑：

如果我在步骤中使用completed和FormGroup属性，则错误状态可以很好地工作，但是我需要没有表格的错误状态。

Answer 1

专用的method描述了显示错误所需的条件：

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

1）我们有stepControl处于无效状态，并且当前步骤已交互

2）我们传递hasError输入道具，它们返回true

!isCurrentStep意味着仅当您执行其他步骤时才会显示错误

因此，您可以使用自定义逻辑将hasError属性传递给步骤，例如：

<mat-step ... #step [hasError]="step.interacted"

Forked Stackblitz

MatStepper如何触发步骤的错误状态？

1 个答案: