How to set active tab using angularJs while validating

Question

Here i created two tabs,my problem is while click the submit button its validating first tab and its not automatically go to second tab how to do ? Thanks for you help in Advanced

angular.module('myApp', []).controller('myCtrl', ['$scope', function($scope){
    $scope.msg='not submitted';
    $scope.tab=1;
    //adding some code to your controller
    //...here
    $scope.validateSubmit = function(){
    //...
    }
}]);

.btn{
    background-color:lightblue;
    cursor: pointer;
    width: 100px;
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">
    <div ng-controller='myCtrl'>
        <form name='myForm' ng-submit="msg='submited'">
            <span class="btn" ng-click="tab=1">tab 1</span>
            <span class="btn" ng-click="tab=2">tab 2</span>
          <div>
                <ng-form ng-show="tab==1">
                    <label>1 st tab</label>
                    <input type="number" ng-model="input2" required="required" />
                </ng-form>
                <ng-form ng-show="tab==2">
                    <label>2nd tab</label>
                    <input type="text" ng-model="input3" required="required" />
                </ng-form>
          </div>
            <p>Form shouldn't submit if both fields are empty or if the first is not a number.</p>
            <input type="submit" value="submit" ng-click="validateSubmit()"/>
        <form>
        <p>{{msg}}</p>
    </div>
</body>

You're question is not clear. do you want to switch to second tab if first tab is valid..? — T J
– T J, Commented Feb 17, 2016 at 5:37
@Nelson Since you only have a common submit button for both tabs, do they actually need to be a <form>...? — T J
– T J, Commented Feb 17, 2016 at 6:29

dieuhd · Accepted Answer · 2016-02-17 07:20:49Z

I think you shouldn't use ng-show because form not submit fields inside display:none element. You can try follow code:

CSS code:

.visible {
    visibility: visible
}

.hidden {
    visibility: hidden
}

HTTML code:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">
    <div ng-controller='myCtrl'>
        <form name='myForm' ng-submit="msg='submited'">
            <span class="btn" ng-click="tab=1">tab 1</span>
            <span class="btn" ng-click="tab=2">tab 2</span>
          <div>
                <ng-form ng-class="tab==1 ? 'visible' : 'hidden'">
                    <label>1 st tab</label>
                    <input type="number" ng-model="input2" required="required" />
                </ng-form>
                <ng-form ng-class="tab==2 ? 'visible' : 'hidden'">
                    <label>2nd tab</label>
                    <input type="text" ng-model="input3" required="required" />
                </ng-form>
          </div>
            <p>Form shouldn't submit if both fields are empty or if the first is not a number.</p>
            <input type="submit" value="submit" ng-click="validateSubmit()"/>
        <form>
        <p>{{msg}}</p>
    </div>
</body>

Collectives™ on Stack Overflow

How to set active tab using angularJs while validating

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related