CODEWITHSUNDEEP
angularjs
code chimp
code chimp

Reputation: 359

Angular Form validation on the field if the value is same as another field

I have two dropdown say 'First Reviewer' and 'Second Reviewer'. I want to validate the dropdown 'Second Reviewer' if the user selects the same value as in first dropdown i.e., 'First Reviewer'. How can I do it in angularjs?

Below is code snippet:

	<div class="row-fluid">	
		<div dyna-span="5,6">
			<bs-control-group label="Review Level:">
				<label class="radio inline"> <input type="radio"
					name="userTypeId" ng-model="reimbReviewer.reviewLevel" value="1"
					class="inline" />&nbsp;One Level
				</label> <label class="radio inline"> <input type="radio"
					name="userTypeId" ng-model="reimbReviewer.reviewLevel" value="2">&nbsp;Two Level
				</label> 
			</bs-control-group>
			<bs-control-group label="First Reviewer"> <select
								class="input-medium" ui-select2 name="firstReviewer"
								ng-model="reimbReviewer.firstReviewer" gt-input-msg
								gt-error-msgs="gtinputerrormsgs" required>
								<option value="">----Select----</option>
								<option ng-repeat="a in reviewerTypes" value={{a.id}}>{{a.title}}</option>
			</select> </bs-control-group>
			<span ng-show="reimbReviewer.reviewLevel==2">
				<bs-control-group label="Second Reviewer"> <select
									class="input-medium" ui-select2 name="secondReviewer"
									ng-model="reimbReviewer.secondReviewer" gt-input-msg
									gt-error-msgs="gtinputerrormsgs"  ng-required="reimbReviewer.reviewLevel==2">
									<option value="">----Select----</option>
									<option ng-repeat="a in reviewerTypes" value={{a.id}}>{{a.title}}</option> 
								</select> </bs-control-group>
		    </span>
		</div>
	</div>

Upvotes: 0

Views: 494

Answers (1)

nivas
nivas

Reputation: 3186

Here is a working demo. 

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

// add a controller
app.controller("myCtrl", function($scope) {
    //debugger;
    $scope.msg = "";
    $scope.reimbReviewer = {};
    $scope.reviewerTypes = [
      {
		id: 1,
        title: 'A'
      },
      {
      	id:2,
        title: 'B'
      },
      {
      	id: 3,
        title: 'C'
      }
    ];
    
    $scope.submit = function() {
    	debugger;
    	if($scope.dropdownForm.$invalid) {
    	  $scope.msg = "Fields are required";
      	//console.log('Fields are required');
        return;
      }
    	if($scope.reimbReviewer.firstReviewer === $scope.reimbReviewer.secondReviewer) {
  			
        //console.log('Fileds must be different');
        $scope.msg = "Fileds must be different";
        return;
      } else {
        $scope.msg = "Both are different. Do your stuff";
      	//console.log('Both are different. Do your stuff');
      }
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<!DOCTYPE html>
<html>

  <head>
  </head>

  <body ng-app="myApp" ng-controller="myCtrl" style="margin:20px">
    <form name="dropdownForm">
      <select name="firstReviewer" ng-model="reimbReviewer.firstReviewer" required>
        <option value="">----first----</option>
        <option ng-repeat="a in reviewerTypes" value="{{a.id}}">
          {{a.title}}
        </option>
      </select>
      
      <select name="secondReviewer" ng-model="reimbReviewer.secondReviewer" required>
      <option value="">----second----</option>
        <option ng-repeat="a in reviewerTypes" value="{{a.id}}">
          {{a.title}}
        </option>
      </select>
      <button type="button" ng-click="submit()">submit</button> <br />
      <p ng-if="msg">{{msg}}</p>
    </form>
  </body>

</html>

once you initialize your ng-models you have compare them if they have same values or not

Upvotes: 1

Related Questions