I am working on a project that involves three different forms, each with its own unique name. Each form has required fields and there is a button that should be disabled until the current form is validated.
<ng-form="form0">
//some required fields
</ng-form>
<ng-form="form1">
//some required fields
</ng-form>
<ng-form="form2">
//some required fields
</ng-form>
<button class="btn btn-primary" ng-click="goToNextTab()" ng-disabled="{{'form'+currentIndex}}.$invalid" ng-show="currentIndex>=0&¤tIndex<3">Next</button>
Currently, the button is disabled initially and only becomes enabled after filling out form1. However, once I move to the next form, the button remains enabled even if the form isn't filled out.
$scope.goToNextTab=function()
{
$scope.currentIndex++;
};