I have Angular page with Angular Material stepper, where each step contents are inside an independent component:
<mat-horizontal-stepper [linear]="isLinear" #stepper>
<mat-step [stepControl]="policyholder" state="phone">
<ng-template matStepLabel>
<span class="d-none d-sm-block">Policyholder</span>
</ng-template>
<policyholder></policyholder>
</mat-step>
<mat-step [stepControl]="policydetails">
<ng-template matStepLabel><span class="d-none d-sm-block">Policy Details</span></ng-template>
<policydetails></policydetails>
</mat-step>
<mat-step [stepControl]="paymentdetails">
<ng-template matStepLabel><span class="d-none d-sm-block">Payment Details</span></ng-template>
<paydetails></paydetails>
</mat-step>
...
</mat-horizontal-stepper>
Each step has some forms with various fields (inputs, selects etc).
My question is - depending on some select option inside Step 1, is it possible to skip Step 2 and go directly to Step 3? For example, only if "yesOption" is selected below?
Or, as an option - make Step 2 invisible maybe?
<mat-form-field appearance="outline" class=“someClass”>
<mat-label>Some Condition</mat-label>
<mat-select placeholder=“Some Select“ formControlName="someControl">
<mat-option value=“yesOption”>Yes</mat-option>
<mat-option value=“noOption”>No</mat-option>
</mat-select>
</mat-form-field>
Currently, I switch to the next step as below:
<button class="someClass" type="submit" [disabled]="policyholderForm.invalid" mat-button matStepperNext>Next Step</button>
I've tried to use selectedIndex
to solve this, but it didn't work well. Please advise me how this can be done, thanks in advance!
You could do with *ngIf
. Set the boolean enableStep2 flag value based on the value selected on step1.
<mat-step [stepControl]="policydetails" *ngIf="enableStep2">
<ng-template matStepLabel><span class="d-none d-sm-block">Policy Details</span></ng-template>
<policydetails></policydetails>
</mat-step>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With