Topic: Linear Stepper does not work with non-form content
*Expected behavior*I am am using the angular version of the linear stepper and need a way to prevent the user to skip steps, if the steps e.g. require selection of cards (people with their picture)
*Actual behavior*it works almost great, but if there are steps, that not contain a form, but other controls (e.g. selection of people via cards). It seams that currently the stepper does not provide such a functionality. enter link description hereHow could i find a workaround to this problem?
Thanking you very much in advance best regards Thomas
Arkadiusz Idzikowski staff answered 4 years ago
You can try to use hidden checkboxes and mark them as checked when a certain condition is met. For example:
HTML:
<mdb-stepper #stepper [linear]="true">
<mdb-step name="Step 1" [stepForm]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<div class="md-form">
<button type="button" mdbBtn color="primary" mdbWavesEffect (click)="completeFirst()">Complete first step</button>
<mdb-checkbox hidden formControlName="first">First</mdb-checkbox>
</div>
</form>
<button mdbBtn size="sm" color="primary" (click)="stepper.next()">CONTINUE</button>
</mdb-step>
<mdb-step name="Step 2" [stepForm]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<div class="md-form">
<button type="button" mdbBtn color="primary" mdbWavesEffect (click)="completeSecond()">Complete second step</button>
<mdb-checkbox hidden formControlName="second">Second</mdb-checkbox>
</div>
</form>
<button mdbBtn size="sm" color="primary" (click)="stepper.next()">CONTINUE</button>
<button mdbBtn size="sm" color="secondary" (click)="stepper.previous()">BACK</button>
</mdb-step>
<mdb-step name="Step 3" label="Step 3 label">
<p class="pl-2">Finish!</p>
<div class="step-actions">
<button mdbBtn size="sm" color="primary" (click)="onSubmit()">SUBMIT</button>
</div>
</mdb-step>
</mdb-stepper>
TS:
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
ngOnInit() {
this.firstFormGroup = new FormGroup({
first: new FormControl(false, [Validators.requiredTrue])
});
this.secondFormGroup = new FormGroup({
second: new FormControl(false, [Validators.requiredTrue])
});
}
completeFirst() {
this.first?.setValue(true);
}
completeSecond() {
this.second?.setValue(true);
}
get first() { return this.firstFormGroup.get('first'); }
get second() { return this.secondFormGroup.get('second'); }
onSubmit() {
// do something here
}
Lustig pro premium priority commented 4 years ago
thank you very much - this works perfectly!!! best regards
Thomas
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 9.3.1
- Device: Desktop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes