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 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…