Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to disable buttons using AngularJS?
In this article, we will learn how to disable button HTML elements using angularJS with the help of the “ng-disabled” angularJS directive.
Disabled buttons can be useful in cases of forms that have some validation required on some input fields. For example, a form with the name and email required should not ideally have the submit button enabled until those required fields are provided with some values. In these types of cases, we can disable and enable the button dynamically to achieve the desired outcome.
Here, we will use the “ng-disabled” angular directive to disable a button. The directive accepts an expression that returns a boolean response determining whether the button is enabled or disabled.
Syntax
<button ng-disabled=”expression”>Button</button>
In the above syntax, the “expression” returns a boolean response.
Let’s understand this with the help of some examples −
Example 1
In this example, we will disable a button element dynamically on the click of the button.
Filename: index.html
<html lang="en">
<head>
<title>How to disable buttons using AngularJS?</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
</head>
<body>
<h3>How to disable buttons using AngularJS?</h3>
<div ng-app="app">
<div ng-controller="controller">
<button id="btn-p" ng-disabled="isBtnDisabled" ng-click="disableBtn()">Enabled button</button>
</div>
</div>
<script>
const btn = document.getElementById("btn-p");
const app = angular.module("app", []);
app.controller("controller", function ($scope) {
$scope.isBtnDisabled = false;
$scope.disableBtn = function () {
$scope.isBtnDisabled = true;
btn.textContent = "Disabled button";
};
});
</script>
</body>
</html>
Example 2
In this example, we will dynamically disable and enable an HTML button element with 2 separate buttons to enable and disable the button respectively.
Filename: index.html
<html lang="en">
<head>
<title>How to disable buttons using AngularJS?</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
</head>
<body>
<h3>How to disable buttons using AngularJS?</h3>
<div ng-app="app">
<div ng-controller="controller">
<button id="btn-p" ng-disabled="isBtnDisabled">Enabled button</button>
<div style="display: flex; gap: 10px; margin-top: 10px">
<button id="enable" ng-click="enableBtn()">Enable</button>
<button id="disable" ng-click="disableBtn()">Disable</button>
</div>
</div>
</div>
<script>
const btn = document.getElementById("btn-p");
const app = angular.module("app", []);
app.controller("controller", function ($scope) {
$scope.isBtnDisabled = false;
$scope.disableBtn = function () {
$scope.isBtnDisabled = true;
btn.textContent = "Disabled button";
};
$scope.enableBtn = function () {
$scope.isBtnDisabled = false;
btn.textContent = "Enabled button";
};
});
</script>
</body>
</html>
Example 3
In this example, we will disable a button until all the required input fields are filled in a form. We will use the “ng-disabled” directive to disable the button until the required input fields have some values.
Filename: index.html
<html lang="en">
<head>
<title>How to disable buttons using AngularJS?</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
</head>
<body>
<h3>How to disable buttons using AngularJS?</h3>
<div ng-app="app">
<div ng-controller="controller">
<form>
<div>
<label for="name">Name:</label>
<input type="text" name="name" ng-model="name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" name="email" ng-model="email" required>
</div>
<button id="submit" ng-disabled="!name || !email">Submit</button>
</form>
</div>
</div>
<script>
const app = angular.module("app", []);
app.controller("controller", function ($scope) {
$scope.name = "";
$scope.email = "";
});
</script>
</body>
</html>
Conclusion
In this article, we learned how to disable HTML button elements dynamically using angularJS, with the help of the “ng-disabled” angularJS directive. In the first example, we disabled the button dynamically at the click of that button. In the second example, we had 2 buttons to enable and disable a button dynamically. In the third example, we disabled the button until all the required fields were filled.
805 Views
