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-stepper的组件和模板代码，那将非常有用。但是，根据您的描述，我认为绑定到selectionChange事件对您有用。

在包含步进器的模板中：的步进example.component.html

<mat-horizontal-stepper #stepper (selectionChange)="onStepChange($event)">  </mat-horizontal-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 } }

Answer 3

您需要添加一个“线性”属性

<mat-vertical-stepper linear>

如果表单无效，将无法导航到下一步。然后，如果表单无效，则单击按钮添加验证功能，然后您可以显示警报或小吃栏或任何您想要的东西。

当mat-stepper验证失败时检测

3 个答案: