Disable button after single click with AngularJS ng-disabled Directive

angularjs javascript

← PrevNext →

Tools you can use

While working on an example in my previous article on performing CRUD operations in AngularJS, I came across this interesting AngularJS directive called ng-disabled. I idea is to disable a button once clicked and prevent users from clicking it again. It makes sense, right? We always need this function while submitting our form data.

You can in-fact do a whole lot of things with this directive. You can apply ng-disabled on many AngularJS form elements, such as an <input> field, it also applies on a <select> and <textarea> element. However, I just wanted to disable my submit button once clicked and later enable it.

Syntax

<input ng-disabled="expression"></input>

You can learn more about it in this doc.

Here is the example.

The Markup
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" 
        ng-controller="myController">

        <button type="submit" ng-disabled="isDisabled" 
            ng-click="save()">Submit Your Data</button>
    </div>
</body>

I have a button with type submit. I have applied two directives to the element, that is, the ng-disabled directive with the value isDisabled and an ng-click directive to call the function save().

Note: The value or expression “isDisabled” can be any other value. For example,

ng-disabled = "disableSubmit"

All you have to do is assign a Boolean true or false to it. That is,

$scope.disableSubmit = true;

The Controller (Script)
<script>
    var myApp = angular.module('myApp', []);

    myApp.controller('myController',
        function ($scope) {

            // THIS IS DEFAULT. IF YOU DO NOT DEFINE IT, IT REMAINS 'false'.
            $scope.isDisabled = false;

            $scope.save = function () {
                console.log('Data Saved.');
                $scope.isDisabled = true;
            };
        });
</script>
</html>

When the page first loads, the button remains enabled. I have set its value as false. Remember, this is its default behavior that is even if you do set it false explicitly, it will remain false. However, when a user clicks the submit button, it calls the save() function and here I have set the value as true. This will disable the button and prevent it from being clicked again, until you explicitly set the value as false to enable it.

Try it Yourself

That's it. Thanks for reading. ☺

← PreviousNext →