Prevent Tab From Closing

ionic-v1
1

Hi,

Is there any way to stop a tab from closing? I have a tab and I want to prevent the user from switching to another tab if the input fields on the tab are not valid.

I’ve tried a few experiments using on-deslect and an $on(’$destroy’) in the controller with out success.

Thanks

2

hey what about ng-if

3

How? sorry, I don’t follow what you mean.

4

hey,
check this and see what i mean.

codepen,io

1 Like
5

Thanks, but this is not what I had in mind.

I have an app with 3 tabs. Here is a pic

We’re on the last tab (person icon). If the email is not valid I want to prevent the user from going to another tab.

The best I’ve been able to do was use a $on.($destroy) that reselected the tab again. But this incurs a controller destroy and recreation that I need to avoid (because user loses all edits)

Thanks,
Gary.

6

I think what You need is a good form validation, check out this article

7

Thanks everyone for the suggestions.

I have form validation, but that alone does not achieve what I need.

I’ll have to use a modal popover to edit the details (I was trying to avoid this as it adds another screen and extra clicks for the user). With a modal I can enable/disable a ‘save’ button based on the form validity, thus forcing the user to complete the form correctly before leaving.

It appears there is no easy way to achieve this at a tab level (ie forcing a user to remain on a tab).

Regards,
Gary.

8

According to the official docs for ui-router (the state provider used for ion-tabs) You can specify a lot of stuff for Your state changes:
UI-Router in depth

If You use $state.go(to [, toParams] [, options]) and then use the options location to set up Your condition:

location Boolean or “replace” (default true), If true will update the url in the location bar, if false will not.

This seems pretty complicated to implement, but I think this will let You avoid that lightbox :smile:

Or You could also catch the event when the change starts and then stop it if the form is not valid:
State Change Events

9

Thanks for putting me on this this.

I had a play with the state change event. While it might be possible, it would be an ugly hack.

For reference, I tried this to see what would happen in a tab’s controller:

$rootScope.$on(’$stateChangeStart’,
function(event, toState, toParams, fromState, fromParams){
console.log(fromState,toState);
event.preventDefault();
});

When clicking onto a different tab, the tab changes, but the content of the tab does not load. – meaning it does not prevent the user from leaving a tab. It just stops the destination tab from loading its view.

10

Hm, that’s interesting how stateChange works :slight_smile: Will You try to use $state.go or a lightbox after all?

11

Im forced into the lightbox. it’s the simplest way forward.

12

I like the idea of showing the settings tab icon only when the “test” is passed :slight_smile: