Segment Switch Event Handling

Hi guys,

I have a page with segments and a form in each segment.
I save form data each time the user switches segment.

I need to make an API request each time a different segment is selected.
I also need to prevent the request and segment switch, if there are errors on the form.

Is there a way to switch segments once the API request has been made?
Is there a way to prevent the switch from taking place, when the user selects a segment?

The dynamic nature of this page seemed more suited to segments as opposed to tabs, which is why this route was taken.


Hi tumain,

You can set a click handler for each segment. When clicked, check your form validator on errors. If there are errors reset segment model

For example if active segment is registration and next segment is bank-info. When User clicks bank-info check registration. If registration hast errors set segment back to registration.

1 Like

Thanks for this.

I figured this out earlier and was going to post my answer. I just assumed at the time that through the ionChange output there was a way to prevent the default behaviour with something like preventDefault or stopPropagation to stop Ionic changing segments.

I did exactly as you mentioned. I have a number of segments on 1 page. Each segment has a component, which has a form. Each segment has an ID. The segment model is based on this ID. I have a method within the component that returns if the form is valid or not. Within the master page the ionChange event handler checks if the component is valid.

I use 2 variables, one for the model binding of the segments (which stores the number of the current segment) and the other (actual ID) holds what the number should be. Whenever the the ionChange event handler is triggered, if the form validity returned is false, I set the current ID to be the actual ID, which prevents it from switching. If valid, I update the actual ID to the new/current ID which Ionic handles when switching segments.