How to disable a submit button based on form validation

In AngularJS, you can easily disable a submit button based on the form’s validation state by using the ng-disabled directive. This directive allows you to bind the button’s disabled property to an expression that evaluates the validity of the form. If the form is invalid (i.e., some fields are not filled correctly), the submit button will be disabled. If the form is valid (i.e., all fields pass validation), the submit button will be enabled.

Here’s how you can implement this functionality step by step:

1. Basic Setup

First, create a basic AngularJS application setup. You’ll need a form and a submit button. The submit button will be disabled based on the form’s validation status.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-controller="FormController">
    <form name="myForm" ng-submit="submitForm()" novalidate>
        <label for="username">Username:</label>
        <input type="text" name="username" ng-model="formData.username" ng-required="true" />
        <span ng-show="myForm.username.$error.required && myForm.username.$dirty">Username is required.</span>

        <br/><br/>

        <label for="email">Email:</label>
        <input type="email" name="email" ng-model="formData.email" ng-required="true" />
        <span ng-show="myForm.email.$error.required && myForm.email.$dirty">Email is required.</span>
        <span ng-show="myForm.email.$error.email && myForm.email.$dirty">Invalid email format.</span>

        <br/><br/>

        <!-- Submit Button -->
        <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
    </form>
</body>
</html>

2. Controller Logic

In your app.js, define the AngularJS application and the FormController. The controller will handle the form submission and validation.

angular.module('myApp', [])
  .controller('FormController', function($scope) {
    $scope.formData = {};  // Holds form data

    // Handle form submission
    $scope.submitForm = function() {
      if ($scope.myForm.$valid) {
        alert("Form submitted successfully!");
      } else {
        alert("Please fill out the form correctly.");
      }
    };
  });

3. Disabling the Submit Button Based on Form Validation

In this example, we’re using the ng-disabled directive on the submit button:

<button type="submit" ng-disabled="myForm.$invalid">Submit</button>

Explanation:

ng-disabled="myForm.$invalid": This disables the submit button if the form is invalid. The $invalid property is automatically set to true if any field in the form is invalid, and to false when all fields are valid.

By default, AngularJS keeps track of the form’s validity. It automatically sets the form’s $valid and $invalid properties based on the validity of the input fields.

4. Explanation of Form Validation Status

$valid: A property that is set to true if all form fields are valid, and false if at least one field is invalid.
$invalid: The inverse of $valid. It is true if any of the form fields are invalid.
$dirty: A property that is set to true if the user has interacted with the field. It helps in showing error messages only after the user has attempted to modify the field.
$error: This property holds validation errors for the form field, such as required, pattern, email, etc.

5. Displaying Validation Messages

In the form, you can also display error messages to the user to indicate which fields are invalid:

For the username field, if it is required but left empty, the message “Username is required” will appear. Username is required.
Similarly, for the email field, the message “Email is required” will show if the field is left empty, and “Invalid email format” will appear if the user enters an incorrect email format. Email is required. Invalid email format.

6. Final Implementation

Here’s the complete code:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        angular.module('myApp', [])
        .controller('FormController', function($scope) {
            $scope.formData = {};  // Holds form data

            // Handle form submission
            $scope.submitForm = function() {
                if ($scope.myForm.$valid) {
                    alert("Form submitted successfully!");
                } else {
                    alert("Please fill out the form correctly.");
                }
            };
        });
    </script>
</head>
<body ng-controller="FormController">
    <form name="myForm" ng-submit="submitForm()" novalidate>
        <label for="username">Username:</label>
        <input type="text" name="username" ng-model="formData.username" ng-required="true" />
        <span ng-show="myForm.username.$error.required && myForm.username.$dirty">Username is required.</span>

        <br/><br/>

        <label for="email">Email:</label>
        <input type="email" name="email" ng-model="formData.email" ng-required="true" />
        <span ng-show="myForm.email.$error.required && myForm.email.$dirty">Email is required.</span>
        <span ng-show="myForm.email.$error.email && myForm.email.$dirty">Invalid email format.</span>

        <br/><br/>

        <!-- Submit Button -->
        <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
    </form>
</body>
</html>