Conditional validation based on other field values

What You’ll Learn

How to apply validation based on another field’s value
Using ng-if, ng-show, and $watch for conditional validation
Dynamically changing required fields
Best practices for form validation

---

1️⃣ Why Use Conditional Validation?

In real-world applications, some fields should only be validated if another field has a specific value.

Examples:
If “Do you have an alternate email?” is Yes, then the Alternate Email field becomes required.
If “Are you an international student?” is Yes, then the Passport Number field should be required.

---

2️⃣ Using ng-if for Conditional Fields

ng-if removes the element from the DOM when the condition is false, ensuring no validation is triggered.

Example: Making “Alternate Email” Required Based on a Checkbox

<div ng-app="myApp" ng-controller="FormController">
    <form name="userForm" novalidate>

        <label>
            <input type="checkbox" ng-model="hasAlternateEmail" /> Do you have an alternate email?
        </label>

        <div ng-if="hasAlternateEmail">
            <label>Alternate Email:</label>
            <input type="email" name="altEmail" ng-model="user.altEmail" required />
            <span class="error" ng-show="userForm.altEmail.$touched && userForm.altEmail.$invalid">
                Enter a valid email.
            </span>
        </div>

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

How It Works:

• The Alternate Email field only appears if the checkbox is checked.
• Since ng-if removes the field from the DOM, the required rule does not apply when it’s hidden.

---

3️⃣ Using ng-show with $watch for Conditional Validation

Unlike ng-if, ng-show keeps the field in the DOM but hides it visually. However, AngularJS still applies validation rules.
To handle this, we can use $watch in the controller.

Example: Requiring Passport Number for International Students

<div ng-app="myApp" ng-controller="FormController">
    <form name="userForm" novalidate>

        <label>Are you an international student?</label>
        <select name="studentType" ng-model="user.studentType">
            <option value="domestic">No</option>
            <option value="international">Yes</option>
        </select>

        <div ng-show="user.studentType === 'international'">
            <label>Passport Number:</label>
            <input type="text" name="passport" ng-model="user.passport" />
            <span class="error" ng-show="userForm.passport.$touched && userForm.passport.$invalid">
                Passport number is required for international students.
            </span>
        </div>

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

AngularJS Controller

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

app.controller("FormController", function ($scope) {
    $scope.user = {};
    
    // Watch for changes in studentType to set passport as required dynamically
    $scope.$watch("user.studentType", function (newValue) {
        if (newValue === "international") {
            $scope.userForm.passport.$setValidity("required", false);
        } else {
            $scope.userForm.passport.$setValidity("required", true);
        }
    });
});

How It Works:

• The passport field remains in the DOM (using ng-show), but validation is dynamically applied using $watch.
• $setValidity("required", false) makes it required only when the user selects “international”.

---

4️⃣ Using Custom Validation for Conditional Fields

You can also create a custom directive for more complex validation logic.

Example: Making “Company Name” Required for Employees

<label>Are you employed?</label>
<select name="employmentStatus" ng-model="user.employmentStatus">
    <option value="unemployed">No</option>
    <option value="employed">Yes</option>
</select>

<label>Company Name:</label>
<input type="text" name="company" ng-model="user.company" required-if="user.employmentStatus === 'employed'" />

<span class="error" ng-show="userForm.company.$touched && userForm.company.$invalid">
    Company name is required if employed.
</span>

Custom Directive for Conditional Required Validation

app.directive("requiredIf", function () {
    return {
        require: "ngModel",
        link: function (scope, element, attrs, ctrl) {
            scope.$watch(attrs.requiredIf, function (newValue) {
                ctrl.$setValidity("required", !!newValue);
            });
        },
    };
});

How It Works:

• The required-if directive watches the condition and updates validation dynamically.
• The form will show an error if employmentStatus is “employed” but the user doesn’t enter a company name.

---

5️⃣ Best Practices for Conditional Validation

Use ng-if when you want to completely remove a field from the DOM.
Use ng-show when you need to keep the field in the DOM but hide it visually.
Use $watch to dynamically apply validation rules based on another field’s value.
Use a custom directive (required-if) for reusable conditional validation logic.
Always test the form with different scenarios to ensure validations work correctly.