How to use ng-disabled and ng-class Directives In Angular

Using ng-if and ng-class Directives

In this approach, we will consider the use case or scenario-based conditions where there is a need to disable the elements using the conditions. So in this case, we can use the ng-disabled and ng-class directives. Here, the ng-disabled is used for form inputs to manage the dynamic behavior for enabling and disabling based on the value of the “disabled” variable. The ng-class is used to provide dynamic styling based on the state of the form elements. In this example, when the user clicks on the “Disable Form” button, the conditions are triggered and the input form elements are been disabled preventing users from entering the data. Once again when the user clicks on the button, the forms are enabled to enter the data. So, this approach mainly makes sure that the form’s attributes are properly managed based on the conditions.

Example: Below is an example that demonstrates conditionally applying attributes in AngularJS using ng-disabled and ng-class Directives.

HTML

<!DOCTYPE html> 
<html ng-app="myApp"> 
  
<head> 
    <script src= 
"https://code.angularjs.org/1.8.2/angular.min.js"> 
      </script> 
    <style> 
        h1, h3 { 
            color: green; 
            text-align: center; 
        } 
  
        .form-container { 
            max-width: 400px; 
            margin: 0 auto; 
            background-color: #f2f2f2; 
            padding: 20px; 
            border: 1px solid #ccc; 
        } 
  
        .form-label { 
            display: block; 
            margin-top: 10px; 
            color: #333; 
        } 
  
        .disabled-input { 
            background-color: #ccc; 
            cursor: not-allowed; 
        } 
  
        .info-message { 
            margin-top: 10px; 
            padding: 10px; 
            background-color: #f2f2f2; 
            border: 1px solid #ccc; 
        } 
    </style> 
</head> 
  
<body> 
    <div ng-controller="MyController"> 
        <h1>w3wiki</h1> 
        <h3> 
              Approach 2: Using ng-disabled  
            and ng-class Directives 
          </h3> 
        <div class="form-container"> 
            <h2>User Form</h2> 
            <form name="myForm" 
                  ng-submit="submitForm()" novalidate> 
                <label for="name" 
                       class="form-label"> 
                      Name: 
                  </label> 
                <input type="text" 
                       id="name" 
                       name="name" 
                       ng-model="formData.name" 
                       ng-disabled="isDisabled"
                       ng-class="{'disabled-input': isDisabled}"> 
                <br> 
                <label for="email" 
                       class="form-label"> 
                      Email: 
                  </label> 
                <input type="email" 
                       id="email" 
                       name="email" 
                       ng-model="formData.email" 
                       ng-disabled="isDisabled"
                       ng-class="{'disabled-input': isDisabled}"> 
                <br> 
                <label for="message"
                       class="form-label"> 
                      Message: 
                  </label> 
                <textarea id="message" 
                          name="message"
                          ng-model="formData.message" 
                          ng-disabled="isDisabled"
                          ng-class="{'disabled-input': isDisabled}"> 
                  </textarea> 
                <br> 
                <button ng-click="toggleDisabled()"> 
                      {{ isDisabled ? 'Enable Form' : 'Disable Form' }} 
                  </button> 
                <button type="submit" 
                        ng-disabled="isDisabled" 
                        ng-click="formSubmitted()"> 
                      Submit Form 
                  </button> 
            </form> 
            <div ng-show="formDataSubmitted" 
                 class="info-message"> 
                <h3>Form Data Submitted:</h3> 
                <p class="form-label"> 
                      Name: {{ formData.name }} 
                  </p> 
                <p class="form-label"> 
                      Email: {{ formData.email }} 
                  </p> 
                <p class="form-label"> 
                      Message: {{ formData.message }} 
                  </p> 
            </div> 
        </div> 
    </div> 
    
    <script> 
        var app = angular.module('myApp', []); 
        app.controller('MyController', function ($scope) { 
            $scope.isDisabled = false; 
            $scope.formData = {}; 
            $scope.formDataSubmitted = false; 
            $scope.toggleDisabled = function () { 
                $scope.isDisabled = !$scope.isDisabled; 
            }; 
            $scope.formSubmitted = function () { 
                $scope.formDataSubmitted = true; 
                alert('Form Submitted!'); 
            }; 
        }); 
    </script> 
</body> 
  
</html>

Output:

What is the best way to conditionally apply attributes in AngularJS?

In the AngularJS application, the best way to conditionally apply attributes to the elements mostly relies on the specific requirement and the actual nature of the attribute that we need to change. Mostly, considering the use cases, we can use the two common approaches for conditional attribute application by using the ng-if and ng-class directive and also the ng-disabled and ng-class to disable the elements conditionally. In this article, we will see both of the approaches with their implementation in terms of examples to conditionally apply attributes in AngularJS.