Ionic 3 - How to prevent the user from clicking slide pager from slide 0 to slide 2 if slide 1 is not answered - ionic-framework

Question

I am working on a Ionic 3 questionnaire application where the user cannot go from one slide to another until the question is answered on a slide. I got everything working except pager (this dots) is allowing the user to go from one slide to another even though question# 2 is not answered.
I added the following logic but its not working as expected. Its still allowing me to jump from slide 0 to slide 2. Adding this.slideTo(this.currentIndex) changed the dot to be highlighted for slide 0 however its showing the contents of Slide# 2.
onSlideWillChange(event) {
let answerNotSelected: boolean = false;
for (let i: number = 0; i < this.slides.getActiveIndex(); i++) {
answerNotSelected = this.questionnaire.questions[i].selectedAnswer === undefined;
if (answerNotSelected) {
console.log('Returning from newQuestionIndex ' + this.slides.getActiveIndex() + ' to current slide:' + this.currentQuestionIndex);
this.slideTo(this.currentQuestionIndex);
}
} }

Answer 1

You could just lock the slides, and only enable back when the question has an answer. That way, the pager won't change the current slide (It would just be there to give the user some feedback about how many other questions are there in the questionnaire):
import { Component, ViewChild } from '#angular/core';
import { NavController, Content, Slides } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'app/home.page.html'
})
export class HomePage {
#ViewChild(Slides) slides: Slides;
ngOnInit() {
this.slides.lockSwipes(true); // Lock the slides
}
public showPrevious(): void {
this.slides.lockSwipes(false); // Unlock the slides
this.slides.slidePrev(500); // Move the the previous
this.slides.lockSwipes(true); // Lock the slides again
}
public showNext(): void {
this.slides.lockSwipes(false); // Unlock the slides
this.slides.slideNext(500); // Move the the next
this.slides.lockSwipes(true); // Lock the slides again
}
}
Please take a look at this working plunker for a demo.

Answer 2

I had the same problem - for anyone in the future I solved it in a albeit slightly hacky way (since _paginationContainer is an internal variable). You could probably also as easily just find elements in the DOM.
I called this on
ionSlideWillChange
, but it could probably be called on any of the swipe events.
ion-slide is very poorly documented, but it is based off of http://idangero.us/swiper/api/ and has all the same methods so you can look here for better documentation.
lockAll() {
var current = this.slider.getActiveIndex();
let array = this.slider._paginationContainer.childNodes
for (let index = 0; index < array.length; index++) {
var button : any = array[index];
if (this.inRange(index, current -1, current +1)) {
button.disabled = false;
}
else {
button.disabled = true
}
}
}
inRange(x, min, max) {
return ((x-min)*(x-max) <= 0);
}