Conditional validations based on other form fields

In some scenarios, form validation rules should change dynamically based on the values of other fields. AngularJS provides ways to implement conditional validations using ng-if, ng-disabled, custom directives, and watching model values.

---

1. Why Conditional Validation?

Enable/Disable validation based on another field’s value.
Ensure the user provides additional input only when needed.
Reduce unnecessary validation errors for hidden fields.

---

2. Example: Conditional Validation for an “Other” Option in a Dropdown

🔹 Requirement:

• If the user selects "Other" from a dropdown, a text input field appears.
• The field should be required only when visible.

Step 1: Define the Form

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

        <label>Job Role:</label>
        <select name="role" ng-model="user.role">
            <option value="Developer">Developer</option>
            <option value="Designer">Designer</option>
            <option value="Other">Other</option>
        </select>

        <div ng-if="user.role === 'Other'">
            <label>Specify Role:</label>
            <input type="text" name="otherRole" ng-model="user.otherRole" ng-required="user.role === 'Other'">
            <p ng-show="userForm.otherRole.$error.required">❌ This field is required.</p>
        </div>

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

How It Works?

✔ The "Specify Role" field only appears when "Other" is selected.
✔ The field is required only when visible, using ng-required="user.role === 'Other'".

---

3. Example: Conditional Validation for Password & OTP

🔹 Requirement:

• If the user selects "Email", they enter a password.
• If the user selects "Phone", they enter an OTP (One-Time Password).
• The validation should dynamically switch between these fields.

Step 1: Define the Form

<form name="loginForm" novalidate>
    
    <label>Login Using:</label>
    <select name="loginMethod" ng-model="user.loginMethod">
        <option value="Email">Email</option>
        <option value="Phone">Phone</option>
    </select>

    <!-- Email Section -->
    <div ng-if="user.loginMethod === 'Email'">
        <label>Email:</label>
        <input type="email" name="email" ng-model="user.email" ng-required="user.loginMethod === 'Email'">
        <p ng-show="loginForm.email.$error.required">❌ Email is required.</p>
        <p ng-show="loginForm.email.$error.email">❌ Enter a valid email.</p>

        <label>Password:</label>
        <input type="password" name="password" ng-model="user.password" ng-required="user.loginMethod === 'Email'">
        <p ng-show="loginForm.password.$error.required">❌ Password is required.</p>
    </div>

    <!-- Phone Section -->
    <div ng-if="user.loginMethod === 'Phone'">
        <label>Phone Number:</label>
        <input type="tel" name="phone" ng-model="user.phone" ng-required="user.loginMethod === 'Phone'">
        <p ng-show="loginForm.phone.$error.required">❌ Phone number is required.</p>

        <label>OTP:</label>
        <input type="text" name="otp" ng-model="user.otp" ng-required="user.loginMethod === 'Phone'">
        <p ng-show="loginForm.otp.$error.required">❌ OTP is required.</p>
    </div>

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

How It Works?

✔ If "Email" is selected, only Email & Password are required.
✔ If "Phone" is selected, only Phone & OTP are required.
✔ Validation dynamically updates based on the selected option.

---

4. Example: Using $watch to Apply Conditional Validation in a Controller

🔹 Scenario:

• A field should be required only if another field contains a specific value.
• Use $watch to observe changes in the first field and apply validation dynamically.

Step 1: Define the Controller

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

app.controller('FormController', function($scope) {
    $scope.user = {};

    $scope.$watch('user.role', function(newValue) {
        if (newValue === 'Other') {
            $scope.userForm.otherRole.$setValidity("required", false);
        } else {
            $scope.userForm.otherRole.$setValidity("required", true);
        }
    });
});

Step 2: Modify the Form

<input type="text" name="otherRole" ng-model="user.otherRole">
<p ng-show="userForm.otherRole.$error.required"> This field is required.</p>

The $watch function dynamically validates the field based on another field’s value.

---

5. Summary Table

Scenario	Solution
Make a field required only when another field has a specific value	ng-required="condition"
Show/hide a field based on another field’s value	ng-if="condition"
Dynamically validate a field in the controller	$watch function
Apply different validation rules dynamically	Custom directive