JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="myApp">
    <div ng-controller='myCtrl'>
        <form name='myForm' ng-submit="msg='submitted'">
            <div class="btn" ng-click="tab=1">tab 1</div>
            <div class="btn" ng-click="tab=2">tab 2</div>
                <ng-form ng-show="tab==1" name="form1">
                    <label>1 st tab</label>
                    <input type="number" ng-model="input2" required="required" />
                </ng-form>
                <ng-form ng-show="tab==2" name="form2">
                    <label>2nd tab</label>
                    <input type="text" ng-model="input3" required="required" />
                </ng-form>
            <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="jumpToInvalidTab()"/>
        <form>
        <p>{{msg}}</p>
        <p>form1.$valid {{ form1.$valid }}</p>
        <p>form2.$valid {{ form2.$valid }}</p>
    </div>
</body>

CSS

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

JavaScript

angular.module('myApp', []).controller('myCtrl', ['$scope', function($scope){
    $scope.msg='not submitted';
    $scope.tab=1
    $scope.jumpToInvalidTab=function(){
        $scope.tab=1;
        if($scope.form1.$valid){
            $scope.tab=2;
        };
        console.warn("Minh: ", $scope.myForm);
    };
}]);