Angularjs UI validate watch issue

Question

I'm trying to make a range validation between 2 numeric inputs. The inputs represent base remuneration and top remuneration. I tried to use ui-validate-watch like this: http://jsfiddle.net/GNJP4/3/. The problem is that basically lowerBound is not updated correctly (same with upperBound)

If you have an idea to make a work around or use directives (I tried but is a mess) would be much appreciated.

Answer 1

here i have two input field like password and confirmPassword. Now we want to do some validate like password match in both fields or not. here is the html and js code snipet.

var validationApp = angular.module('validationApp',['ngGrid','ui.utils']);


// you have to be put this line of code in your controller
$scope.formData = {    
      password: "",
      cPassword: ""
  };

<!-- password -->
      <div class="form-group" ng-class="{ 'has-error' : userForm.password.$invalid && !userForm.password.$pristine }">
        <label>Password</label>
        <input type="password" name="password" class="form-control" ng-model="formData.password" ng-minlength="5" ng-maxlength="12" required>
        <p ng-show="userForm.password.$invalid && !userForm.password.$pristine" class="help-block">Required and must be of length 7 to 12.</p>
      </div>

      <!-- confirm password -->
      <div class="form-group" ng-class="{ 'has-error' : userForm.cPassword.$invalid && !userForm.cPassword.$pristine }">
        <label>Confirm Password</label>
        <input type="password" name="cPassword" class="form-control" ng-model="formData.cPassword" ui-validate=" '$value==formData.password'" ui-validate-watch=" 'formData.password'"  ng-minlength="5" ng-maxlength="12" required>
        <p ng-show="userForm.cPassword.$invalid && !userForm.cPassword.$pristine" class="help-block">Required. Password not match</p>
      </div>