CODEWITHSUNDEEP
javascriptangularjs
Niranjan Godbole
Niranjan Godbole

Reputation: 2175

Angularjs ng-if with required field validation

Hi I am developing one web application in angularjs. I have one checkbox and very next i have one dropdown. If i check checkbox then i want to make dropdown required. Wheneer i do following,

I click on checkbox-dropdown required validation will occur. Whenever i uncheck on checkbox still my required validation will occur. I want to make required validation for dropdown only when checkbox is checked.

Below is my checkbox.

<div class="inputblock">
                            <label class="inputblock-label">{{ 'Military' | translate }}</label>
                            <label class="military">{{ 'Military' | translate }}</label>
                            <input type="checkbox" name="Military" placeholder="{{ 'Military' | translate }}" ng-model="Military" ng-change="statechanged(Military)">
                        </div>

Below is my dropdown.

 <div class="inputblock" ng-class="{ 'has-error' : ((form3.$submitted && form3.rank.$invalid)  || (form3.rank.$invalid && form3.rank.$dirty))}">
                            <label class="inputblock-label">{{ 'Rank' | translate }}</label>
                            <div ng-if="rankrequired==true">
                                <span class="ang-error" style="color:#fff" ng-show="form3.rank.$invalid && form3.rank.$error.required && form3.rank.$dirty">*{{'Required' | translate}}</span>
                            </div>
                            <select id="rank" name="rank" ng-model="user.rank" ng-options="user.ID as user.Rank for user in rankList" required>
                                <option value="" label="rank">{{ 'Rank' | translate }}</option>
                            </select>
                        </div>

Below is my javascript code.

 $scope.statechanged = function (Military) {

                if (Military == true)
                {  
                    enablerankdropdown();
                    $scope.rankrequired = function () {
                        return true;
                    };
                }
                else
                {
                    $scope.user.rank = $scope.rankList[0].value;
                    disablerankdropdown();
                    $scope.rankrequired = function () {
                        return false;
                    };

                }
            }

Whenever i uncheck the checkbox i dont want to have required field validator. Now i am getting required field validator after unchecking also. May i know why this is happening here? May i get some help in order to fix the above issue? Any help would be appreciated. Thank you.

Upvotes: 0

Views: 6180

Answers (2)

Vivz
Vivz

Reputation: 6620

You can use ng-required to achieve this. Assign the ng-model of your checkbox to ng-required of select.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>  
<body>

<h2>Validation Example</h2>

<form ng-app="myApp" ng-controller="validateCtrl" 
name="myForm" novalidate>

<input type="checkbox" name="user" ng-model="user">

  <select name="service_id" class="Sitedropdown" style="width: 220px;"          
          ng-model="ServiceID" 
          ng-options="service.ServiceID as service.ServiceName for service in services"
          required ng-required="user"> 
    <option value="">Select Service</option> 
  </select> 
  <span style="color:red" ng-show="myForm.service_id.$error.required">Select service</span>
<input type="submit"
ng-disabled="  
myForm.service_id.$dirty && myForm.service_id.$invalid">
</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
  $scope.services = [
    {ServiceID: 1, ServiceName: 'Service1'},
    {ServiceID: 2, ServiceName: 'Service2'},
    {ServiceID: 3, ServiceName: 'Service3'}
  ];
});
</script>

</body>
</html>

Upvotes: 2

Dixit
Dixit

Reputation: 1379

You can use ng-required="Military". 

       <div class="inputblock" ng-class="{ 'has-error' : ((form3.$submitted && form3.rank.$invalid)  || (form3.rank.$invalid && form3.rank.$dirty))}">
            <label class="inputblock-label">{{ 'Rank' | translate }}</label>
            <div ng-if="rankrequired==true">
                 <span class="ang-error" style="color:#fff" ng-show="form3.rank.$invalid && form3.rank.$error.required && form3.rank.$dirty">*{{'Required' | translate}}</span>
            </div>
           <select id="rank" name="rank" ng-model="user.rank" ng-options="user.ID as user.Rank for user in rankList" ng-required="Military">
              <option value="" label="rank">{{ 'Rank' | translate }}</option>
           </select>
       </div>

Upvotes: 1

Related Questions