How to check the disabled button is true/false ? in angularjs

Question

Hi guys is there any ways on how to check the disable button ??

Here is my button disabled code inside (index.html):

ng-disabled="epUpdateAllForm.$invalid || epUpdateAllForm.$pending"

In controller :

    if((($scope.epUpdateAllForm.$invalid)  || ($scope.epUpdateAllForm.$pending)) == true) {

        console.log("Some mandatory fields is not completed");
    }  

Answer 1

You can check button is disabled using angular.element(..).prop()

var target = angular.element(document.getElementById("#buttonIdHere"));
if (target.prop('disabled')) {
    // Button is disabled
}

Option 2 Watch for yourForm.$valid , yourForm.$invalid & yourForm.$pending in your controller

var isFormValid = false;
$scope.$watch('yourForm.$valid', function(newVal) {
    isFormValid = true;
});

$scope.$watch('yourForm.$invalid', function(newVal) {
    isFormValid = false;
});

$scope.$watch('yourForm.$pending', function(newVal) {
    isFormValid = false;
});

And simply check if isFromValid is true before executing your submission logic.

Answer 2

If you need to check the logic of submit , then you can pass a form object to the handler submit .

Example on jsfiddle .

 angular.module('ExampleApp', []) .controller('ExampleController', function($scope) { $scope.submit = function(form) { if (form.$invalid) console.warn('Form is invalid'); else console.log('Form is valid'); }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="ExampleApp"> <div ng-controller="ExampleController as vm"> <form name="testForm"> <label> This field is required <input type="text" name="testInput" ng-model="myInput" required> </label> <button ng-click="submit(testForm)"> Submit </button> </form> </div> </div>