在 Angular 10 中单击步进器标题时显示警告消息

Question

我想在用户点击第二个步进器时显示警告 'Fill out your address'。如果表单为空，则提交的表单将显示红色边框颜色，同时我也想显示警报消息。我创建了函数 'onSubmit'。 'Next' 按钮正在触发 onSubmit 函数，如果用户也单击第二个步进标题，我想触发相同的函数。

            <mat-horizontal-stepper [linear]="true" #stepper>
            <mat-step [stepControl]="firstFormGroup">
                <form [formGroup]="firstFormGroup">
                <ng-template matStepLabel>Fill out your name</ng-template>
                <mat-form-field>
                    <mat-label>Name</mat-label>
                    <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
                </mat-form-field>
                <div>
                    <button mat-button matStepperNext>Next</button>
                </div>
                </form>
            </mat-step>
            <mat-step [stepControl]="secondFormGroup" label="Fill out your address">
                <form [formGroup]="secondFormGroup">
                <mat-form-field>
                    <mat-label>Address</mat-label>
                    <input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY"
                        required>
                </mat-form-field>
                <div>
                    <button mat-button matStepperPrevious>Back</button>
                    <button mat-button matStepperNext>Next</button>
                </div>
                </form>
            </mat-step>
            <mat-step>
                <ng-template matStepLabel>Done</ng-template>
                <p>You are now done.</p>
                <div>
                <button mat-button matStepperPrevious>Back</button>
                <button mat-button (click)="stepper.reset()">Reset</button>
                </div>
            </mat-step>
            </mat-horizontal-stepper>

Answer 1

在 mat-horizontal-stepper 上使用“selectionChange”输出事件

<mat-horizontal-stepper (selectionChange)="onChange($event)" [linear]="true" #stepper>

在您的 onChange 方法中，您可以通过 selectedIndex 或通过事件传递的对象捕获单击的步骤。

onChange(e: StepperSelectionEvent) {

if (e.selectedIndex == 1) {
  // alert or do something
}

}

在您的步骤顺序中，您地址步骤的索引为 1。您还可以通过事件上的属性“selectedStep”访问地址步骤对象。

https://material.angular.io/components/stepper/api#MatHorizontalStepper

不幸的是，angular 垫文档说 MatHorizontalStepper 对象已弃用。您以后可能需要检查替代方案。

我已经在 stackBlitz 上对其进行了测试，它对我有用。

在 Angular 10 中单击步进器标题时显示警告消息

Showing an alert msg when clicking on stepper titles in Angular 10

angular

angular10