时间戳

首页 > 解决方案 > 如何为 matStepperNext 创建条件？

angular - 如何为 matStepperNext 创建条件？

问题描述

我有一个 3 步材料步进器，第一步是检查数据是否在数据库中。如果它在，将弹出一个警告窗口，但该步骤将移至下一个。我试图解决 stepper.previous() 解决方案，但同样的方式它会自动跳转到下一步，然后才返回第一个。我希望如果弹出警报窗口，它不会进入下一步，而是留在那里。

这是第一步（我不复制其余部分。）

  <mat-vertical-stepper [linear]="isLinear" #stepper>
    <mat-step [stepControl]="nameFormGroup">
      <mat-card>
        <mat-card-content>
          <form [formGroup]="nameFormGroup">
            <ng-template matStepLabel>
              Fill out your organization name.
            </ng-template>
            <mat-form-field >
              <input
              type="text"
              matInput
              placeholder="Name of organization"
              formControlName="name"
              required 
              >
              <mat-error *ngIf="nameFormGroup.invalid">
                Name is required.
              </mat-error>
            </mat-form-field>
            <div>
              <button [disabled]="nameFormGroup.invalid"
              (click)="checkOrganization()"
              mat-raised-button
              matStepperNext
              color="primary">Next</button>
            </div>
          </form>
        </mat-card-content>
      </mat-card>
    </mat-step>
  </mat-vertical-stepper>

.ts：

  @ViewChild('stepper', { static: false }) stepper: MatStepper;

  checkOrganization() {
    this.orgService.checkOrganization(this.nameFormGroup.value.name, this.stepper);
  }

服务：

  checkOrg: boolean;
  checkOrganization(name: string, stepper?: MatStepper) {
    this.db.collection('organization').doc(name).get().subscribe(doc => {
      if(doc.exists) {
        this.checkOrg = false;
        stepper.previous();
        this.presentAlert();
      }else {
        this.checkOrg = true;
      }
    });
  }

那么如果弹出alert窗口，stepper没有进入下一步怎么解决呢？

标签： angularangular-material

解决方案

删除matStepperNext按钮并使用手动导航到下一步this.stepper.next()

 <button [disabled]="nameFormGroup.invalid"
                  (click)="checkOrganization()"
                  mat-raised-button
                  color="primary">Next</button>

在您的 ts 文件验证功能中

checkOrg: boolean;
  checkOrganization(name: string, stepper?: MatStepper) {
    this.db.collection('organization').doc(name).get().subscribe(doc => {
      if(doc.exists) {
        this.checkOrg = false;
        stepper.previous();
        this.presentAlert();
      }else {
        this.checkOrg = true;
        stepper.next();
      }
    });
  }

这里是 stackblitz 演示：https ://stackblitz.com/edit/angular-pq24e5-tqqgrg?file=src/app/stepper-overview-example.ts

推荐阅读