CODEWITHSUNDEEP
javascriptjqueryangularjstwitter-bootstrap-3
Nelson
Nelson

Reputation: 383

How to set active tab using angularJs while validating

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>

Upvotes: 0

Views: 680

Answers (1)

dieuhd
dieuhd

Reputation: 1326

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>

Upvotes: 2

Related Questions