Определить, когда проверка валидатора не удалась

Question

У нас есть линейный mat-horizontal-stepper Теперь мы хотим показать MatSnackBar когда пользователь пытается продолжить забытое обязательное поле.

CdkStepper кажется звонит _anyControlsInvalidOrPending молча и возвращает, если какой-либо ввод не действителен.

У кого-нибудь есть идеи, как обнаружить это событие?

Это должно быть обнаружено при звонке stepper.next(), stepper.previous() а также step.select()

Answer 1

Грязное решение будет

  ngAfterViewInit() {
    // when clicking on the step header
    this.stepper._steps.forEach((step) => {
      this.addPriorValidyCheckToFunction(step, 'select');
    });
    // when calling previous and next function
    this.addPriorValidyCheckToFunction(this.stepper, 'next');
    this.addPriorValidyCheckToFunction(this.stepper, 'previous');
  }

  addPriorValidyCheckToFunction(object, functionName) {
    // keep reference to AppComponent
    let self = this;
    // keep reference to original function
    let oldFunction = object[functionName];
    // replace original function
    object[functionName] = function () {
      // remember step before calling the function
      let oldStep = self.stepper.selected;
      // call the original function
      oldFunction.call(object);
      // if step did not change and form is invalid, show the message
      if (oldStep == self.stepper.selected && !self.stepper.selected.stepControl.valid) {
        self.snackBar.open("Fehler", "Bitte überprüfen Sie Ihre Eingaben", {
          duration: 2000,
        });
      }

    };
  }

Answer 2

Вам нужно добавить "линейный" атрибут

<mat-vertical-stepper linear>

Это отключит переход к следующему шагу, если форма недействительна. Затем добавьте свою функцию проверки по нажатию кнопки, если форма недействительна, тогда вы можете показать предупреждение или снэк-бар или что угодно.

Answer 3

Если бы вы могли показать свой компонент и код шаблона, который содержит мат-степпер, это действительно помогло бы. Однако из вашего описания я считаю, что привязка к событию selectionChange будет работать для вас.

В шаблоне, который содержит степпер:stepper-example.component.html

<mat-horizontal-stepper #stepper (selectionChange)="onStepChange($event)">
 <!-- your form -->
</mat-horizontal-stepper>

Тогда в вашем компоненте:stepper-example.component.ts

import { Component, ViewChild } from '@angular/core';
@Component({
  selector: 'stepper-example',
  templateUrl: './stepper-example.component.html'
})
export class StepperExampleComponent {
@ViewChild('stepper') stepper;


public onStepChange(event): void{
    //Some logic to validate your forms
  }
}