angular - 检测 mat-stepper 验证失败的时间

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

    };
  }