Pesquisa de site

javascript - Como o MatStepper aciona o estado de erro para um passo?

Estou implementando um mat-horizontal-stepper em um dos meus componentes e estou tentando fazer com que o estado de erro seja exibido em um passo se eu sair dele enquanto a propriedade [completed] estiver false, mas isso não está acontecendo.

Não tenho certeza se há algumas limitações ao trabalhar com a propriedade completed ou algo assim; isso é o que eu tenho até agora:

HTML do Componente

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

@Component({
  selector: 'app-new-audit',
  templateUrl: './new-audit.component.html',
  styleUrls: ['./new-audit.component.scss'],
  providers: [
    {
      provide:  STEPPER_GLOBAL_OPTIONS,
      useValue: { showError: true }
    }
  ]
})

No código acima, estou apenas fornecendo as coisas importantes; mas se eu estiver seguindo corretamente a documentação do Angular Material, o que eu preciso fazer é adicionar os providers ao componente (ou ao meu módulo principal do App) e é só isso?

Então, se eu chegar à etapa 2, por exemplo, mas mantiver a condição completed como falsa e depois passar para outra etapa, isso deve acionar o erro porque a etapa não está mais ativa, mas também não está concluída.

Estou apenas tentando entender como tudo funciona, já que não estou usando formulários reativos ou qualquer formulário na verdade para este stepper, pois estou trabalhando com um MatTable; eu só preciso que o usuário selecione uma linha da tabela (via recurso de seleção do MatTable) e, se o array de seleção tiver um elemento, então posso considerar o passo como "completo" e permitir passar para o próximo passo.

Demo do Stackblitz https://stackblitz.com/edit/angular-khyu8u

EDITAR:

O estado de erro funciona perfeitamente se eu usar um FormGroup e a propriedade [stepControl] para o passo, mas eu preciso disso sem um formulário.

Resposta #1

Existe um método dedicado que descreve o que é necessário para que um erro seja exibido:

private _getDefaultIndicatorLogic(step: CdkStep, isCurrentStep: boolean): StepState {
  if (step._showError && step.hasError && !isCurrentStep) {
    return STEP_STATE.ERROR;
  }
  • step._showError vem de STEPPER_GLOBAL_OPTIONS que você definiu nos provedores
  • step.hasError inclui a parte mais interessante

Aqui estão todas as definições:

@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;
}

Como você pode ver, hasError retorna true se

1) temos stepControl com estado inválido e o passo atual está sendo interagido

2) nós passamos as props de entrada hasError que retornam true

  • !isCurrentStep significa que um erro será exibido apenas se você estiver em outras etapas

Então você pode passar a propriedade hasError para a etapa com sua lógica personalizada, por exemplo:

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

Forked Stackblitz

Artigos relacionados