angular - マットステッパーの検証が失敗したことを検出する

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,
        });
      }

    };
  }