Disable ion-view back navigation if form in view invalid

ionic-v1
#1

In the tab example (http://ionicframework.com/docs/api/directive/ionTabs/) say I navigate to a new state/view from Home. The new view has a back button for Home. If this view has a form with validation of inputs and I don’t want to allow the user to go back to Home until the form is valid, how I can do that? Anyway to disable that back button in the ion-view conditionally?

Ps: In my ion-view I tried to add a tag and use ng-disabled on it, but when I did that both the Back button (enabled) and the Home (disabled) showed up.

#2

I would create for every different usage of a view a new state…

so you have a state with your form
and other states without the form.

so each state has its own ion-view and you can disable back button in that views.

but keep in mind that you should disable hardware backbutton on android if you really do not want to allow to go back ;).

#3

I do have a state for each view. The question is the mechanism to disable the “automatic” back button button that ion-view displays given the state’s form validation state. By automatic I mean the ion-view at the moment doesn’t even have a tag for the back button. It’s provided automatically as you enter the view/state.

#4

but you can add you back button a condition to show or hide?
Default it is true and if you try to navigate to a state with a form -> set it to false ($rootScope.$on(’$stateChangeStart’, …);

And in the controller you can check if the form has changed, if it is valid.

You can add customData to a state / view.
If you know your state has a form -> set a flag in your routes like “hideBackButton”: true-

.state('myState', {
   url: '',
   controller: 'MyCtrl',
   template: 'myTemplate.html',
   hideBackButton: true
});

Now on the state object you can find the key - state.hideBackButton.

$rootScope.$on('$stateChangeStart', function (event, fromState, fromParams, toState, toParams) {
   if (toState.hideBackButton) {
     // set flag to hide the backbutton before the view is entered
   }
});

For that you can also use the new ion-view events:
http://ionicframework.com/docs/api/directive/ionView/