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

Question

我正在我的一个组件中实现一个 mat-h​​orizo​​ntal-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 条件为假，然后移动到另一个步骤，它应该触发错误，因为该步骤不再处于事件状态，但也没有完成。

我只是想了解一切是如何工作的，因为我没有使用 react 形式或实际用于此步进器的任何形式，因为我使用的是 MatTable；我只需要用户从表中选择一行(通过 MatTable 的选择功能)，如果选择数组有一个元素，那么我可以认为该步骤“完成”并允许移动到下一步。

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

编辑:

如果我为该步骤使用 FormGroup 和 [stepControl] 属性，错误状态会工作得很好，但我需要它而不需要表单。

Answer 1

有专门的method描述显示错误所需的内容:

private _getDefaultIndicatorLogic(step: CdkStep, isCurrentStep: boolean): StepState {
  if (step._showError && step.hasError && !isCurrentStep) {
    return STEP_STATE.ERROR;
  }

• step._showError 来自您在 providers 中定义的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 的输入 Prop

• !isCurrentStep 表示只有在其他步骤时才会显示错误

因此您可以将 hasError 属性传递给具有自定义逻辑的步骤，例如:

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

Forked Stackblitz