Disabling submit button based on validation status

In AngularJS, form validation plays a crucial role in ensuring that users enter correct data before submitting. To improve user experience, we can disable the submit button dynamically based on the form’s validation status using AngularJS directives and built-in form controls like:

• $valid → The form is valid
• $invalid → The form has validation errors
• $pristine → The form has not been modified
• $dirty → The form has been modified

---

1. Disabling Submit Button Based on Form Validation

Requirement: Disable the submit button until all form fields are valid.

Step 1: Define the Form with Validation Rules

<div ng-app="myApp" ng-controller="FormController">
    <form name="userForm">
        <label>Name:</label>
        <input type="text" name="name" ng-model="user.name" required>
        <p ng-show="userForm.name.$error.required"> Name is required.</p>

        <label>Email:</label>
        <input type="email" name="email" ng-model="user.email" required>
        <p ng-show="userForm.email.$error.required"> Email is required.</p>
        <p ng-show="userForm.email.$error.email"> Enter a valid email.</p>

        <button type="submit" ng-disabled="userForm.$invalid">Submit</button>
    </form>
</div>

The Submit button is disabled until all fields are valid.

---

2. Disabling Submit Button Until Form is Modified ($pristine)

Requirement: The submit button should remain disabled until the user modifies any field.

Modified Code

<button type="submit" ng-disabled="userForm.$invalid || userForm.$pristine">Submit</button>

The Submit button remains disabled even if the fields are empty until the user starts typing.

---

3. Example: Disabling Submit for Password Validation

Requirement: Disable submit until password and confirm password match.

Step 1: Create the Password Match Directive

var app = angular.module('myApp', []);

app.directive('matchPassword', function() {
    return {
        require: 'ngModel',
        scope: {
            otherModelValue: "=matchPassword"
        },
        link: function(scope, element, attrs, ngModelCtrl) {
            ngModelCtrl.$validators.matchPassword = function(value) {
                return value === scope.otherModelValue; //  Valid if passwords match
            };

            scope.$watch("otherModelValue", function() {
                ngModelCtrl.$validate();
            });
        }
    };
});

Step 2: Implement the Form

<form name="passwordForm">
    <label>Password:</label>
    <input type="password" name="password" ng-model="user.password" required>

    <label>Confirm Password:</label>
    <input type="password" name="confirmPassword" ng-model="user.confirmPassword" match-password="user.password" required>

    <p ng-show="passwordForm.confirmPassword.$error.matchPassword">❌ Passwords do not match.</p>

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

The Submit button remains disabled until the passwords match.

---

4. Summary Table

Validation Rule	Solution
Disable button until all fields are valid	ng-disabled="formName.$invalid"
Disable button until form is modified	ng-disabled="formName.$pristine"
Disable button until passwords match	Custom directive (matchPassword)