Onsen, AngularJS and previous-next buttons iOS

Question

I use Onsen and Anguarlarjs to make my mobile app.

The app having four tabs, tab two contains a form and tab four contain another form. When my app run in iOS platform, I fill two tab form and Apple keyboard show next-previous buttons.

When the focus is on the last input, next button is enabled. If I click in next button, first input of the four page is focus and the tabs go out of control. I try use <input tabindex=""> to fix this issue but not work correctly.

How to fix forms for what not jump page two to page four when click in next button?

Thanks a lot!

Answer 1

I have been able to fix the problem. I disabled inputs in form2 and enabled inputs in form1 when tab1 is visible. If tab2 is visible form1 inputs are disabled and form1 inputs are enabled. This way the buttons next-previous in ios work in the correct order and do not jump from one form to another. This is the code:

-Controller

$scope.checkTab = function (tab) {
    if (tab == 1 || tab==4) {
        var form1 = document.getElementById("form1");
        var form2 = document.getElementById("form2");

        switch (tab) {
            case 1:
                disableForm(form1,false);
                disableForm(form2,true);
                break;

            case 4:
                disableForm(form1,true);
                disableForm(form2,false);
                break;

        }
    }
}
function disableForm(form,disabled){
    var elements = form.elements;
    for (var i = 0, len = elements.length; i < len; ++i) {
        elements[i].disabled = disabled;
    }
}

-HTML

 <ons-tab ng-click="checkTab(0)" page="html/page.html" active> //number is tab position 

Regards