$setValidity() not updating form state

In AngularJS, the $setValidity() method is used to manually change the validity of a form control. However, sometimes it does not update the form state as expected. Below, we will explore why this happens and how to fix it step by step.

---

1. What is $setValidity()?

$setValidity(validationErrorKey, isValid) is used in custom directives or controllers to update the form control’s validity manually.

Example Usage

$scope.myForm.username.$setValidity("customError", false);

• The first argument "customError" is a key for the validation error.
• The second argument false marks the field as invalid.
• If set to true, it removes the error.

---

2. Why $setValidity() is Not Updating the Form State?

1. $setValidity() Called on undefined Form Control

If the form control does not exist or is not initialized properly, $setValidity() will not work.

Incorrect:

$scope.username.$setValidity("customError", false);

Issue: $scope.username is not the correct form control object.

Fix: Use formName.controlName

$scope.myForm.username.$setValidity("customError", false);

Ensure that myForm exists in the scope.

---

2. $setValidity() Called Before Form is Initialized

If you call $setValidity() before the form is available, it won’t update.

Incorrect:

$scope.myForm.username.$setValidity("customError", false);

If myForm is not initialized yet, this will not work.

Fix: Call it inside $timeout

$timeout(function () {
    $scope.myForm.username.$setValidity("customError", false);
});

Ensures the form is available before calling $setValidity().

---

3. Not Using $apply() to Update the Scope

If $setValidity() is called outside the AngularJS digest cycle, the UI won’t update.

Incorrect:

$scope.myForm.username.$setValidity("customError", false);

If this runs outside Angular’s digest cycle (e.g., inside an async function), it won’t update.

Fix: Use $scope.$apply()

$scope.$apply(function () {
    $scope.myForm.username.$setValidity("customError", false);
});

This forces Angular to detect changes.

---

4. $setValidity() Overwritten by Another Validation

Sometimes, $setValidity() is set to true, but another validation immediately sets it back to false.

Issue:

• A directive might set $setValidity("customError", true), but another validation rule overrides it.

Fix: Debug using console.log()

$scope.myForm.username.$setValidity("customError", false);
console.log($scope.myForm.username.$error);

This checks if another validation is interfering.

---

5. Form Control Name Mismatch

If the form control name in HTML does not match the JavaScript reference, $setValidity() will not work.

Incorrect:

<input type="text" name="userName" ng-model="user.username">

$scope.myForm.username.$setValidity("customError", false);

Mismatch: name="userName" but $setValidity("username")

Fix: Match Names

<input type="text" name="username" ng-model="user.username">

$scope.myForm.username.$setValidity("customError", false);

Ensure the names match!

---

6. $setValidity() Not Triggering UI Update

If $setValidity() updates internally but the UI does not reflect changes, try these:

Fix 1: Manually Trigger $dirty

$scope.myForm.username.$setDirty();
$scope.myForm.username.$setValidity("customError", false);

This forces UI updates.

Fix 2: Reset Form State

$scope.myForm.$setPristine();
$scope.myForm.$setUntouched();
$scope.myForm.username.$setValidity("customError", true);

Resets the form and re-applies validity.

---

3. Full Working Example

HTML

<form name="myForm" novalidate>
  <input type="text" name="username" ng-model="user.username">
  <div ng-show="myForm.username.$error.customError">
    Invalid username!
  </div>
  <button ng-click="validateUsername()">Validate</button>
</form>

Controller

$scope.validateUsername = function() {
    if ($scope.user.username.length < 5) {
        $scope.myForm.username.$setValidity("customError", false);
    } else {
        $scope.myForm.username.$setValidity("customError", true);
    }
};

Now $setValidity() properly updates the form state!