angular - How can I make a condition for matStepperNext?

Question

I have a 3-step material steppper and the first step is to check if the data is in the database. If it is in, an alert window will pop up, but the step will move to the next one. I tried to solve the stepper.previous () solution, but in the same way it automatically jumps to the next step and only then returns to the first one. I want if the alert window pop up, it doesn't go to the next step but stay there.

This is the first step (I do not copy the rest.)

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

service:

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

So how do I solve if the alert window pop up, stepper doesn't go to the next step?

question from:https://stackoverflow.com/questions/66063361/how-can-i-make-a-condition-for-matsteppernext

Answer 1

Remove the matStepperNext in your button and navigate to next stepper manually using this.stepper.next()

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

In your ts file validation function

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

Here the stackblitz Demo: https://stackblitz.com/edit/angular-pq24e5-tqqgrg?file=src/app/stepper-overview-example.ts