Dynamically update 'max' validation in AngularJS

Question

Edit: Massively simplified to get to the core of the problem

In Angular (v1.2.22) validation, if the value of max depends on another value, and that value updates, the validation state does not automatically update.

var app = angular.module('app',[]).
controller('TestCtrl', function($scope){
  $scope.partWidth = 10;
});

HTML:

<form name="itemForm">
  <label for="partWidth">Part width</label>
  <input id="partWidth" name="partWidth" min="10" max="180"  ng-model="partWidth" placeholder="mm" required type="number">

  <label for="cutterwidth">Cutter width</label>
  <input id="cutterwidth" name="cutterwidth" min="10" max="{{ partWidth }}"  ng-model="cutterwidth" placeholder="mm" required type="number">
</form>

Updated Plunker http://plnkr.co/edit/lNemYyFrHF9gyRgY8KIT

The ng-invalid class is not removed unless the cutterwidth itself is edited.

a) Is this a bug?

b) Is there a workaround? (e.g. force validation to run, somehow trigger the input event etc)

Interestingly, if you watch at the max="" attribute of cutterwidth in the rendered page it DOES update live as the value of partwidth is changed. However Angular only removes the ng-invalid class when the cutterwidth itself is edited, this is not triggered when the value of max changes. Is this a bug? — Ade
– Ade, Commented Aug 20, 2014 at 15:12

Ade · Accepted Answer · 2014-08-21 08:29:57Z

a) I think it's this bug.

b) My workaround, after much epic battling, was to avoid using the native max attribute entirely, and to build a custom directive instead.

I'm exposing the ngAppMax attribute to the scope, and passing in ngModel using the =. I don't fully understand this but it works.

I'm then comparing the two values and using $setValidity on the model (named 'ctrl').

Here's a working Plunker, or see below:

HTML

<form name="itemForm">
  <input name="partWidth" min="10" max="300" ng-model="partWidth" placeholder="mm" required type="number">
  <input name="cutterwidth" min="10" ng-app-max="{{ partWidth }}" ng-model="cutterWidth" placeholder="mm" required type="number">
</form>

JS

angular.module('app',[]).
controller('TestCtrl', function($scope){}).
directive('ngAppMax', function(){
  return {
    require: 'ngModel',
    scope: {
      ngAppMax: '@',
      ngModel: '='
    },
    link: function(scope, element, attrs, ctrl){

      scope.$watch('ngAppMax', function(newVal){
        validate(scope.ngModel, newVal, ctrl);
      });

      scope.$watch('ngModel', function(val){
        validate(val, scope.ngAppMax);
      });

      function validate(thisVal, maxVal){
        if(thisVal > maxVal){
          ctrl.$setValidity('range', false);
        } else {
          ctrl.$setValidity('range', true);
        }
      }

    }
  }
});

CozyAzure · Accepted Answer · 2014-08-20 15:28:46Z

0

Actually, you have missed out a little detail in the logic.

For your PartWidth, what you need to do is to check whether the user has input anything below 10, or anything below the cutterwidth. Thus, a getMax function should do the trick.

    <input id="width" name="width" min="{{ getMax(10, cutterwidth) }}" max="180"   ng-model="width"    placeholder="mm" required type="number">

The getMax function is pretty straightforward. Just inverse the getMin function.

Here is the working plnkr

answered Aug 20, 2014 at 15:28

CozyAzure

8,4987 gold badges39 silver badges56 bronze badges

3 Comments

Ade Over a year ago

I could add that, but partWidth needs no dependency on the cutter width, and this doesn't actually solve the problem. Perhaps I didn't explain it well enough.

CozyAzure Over a year ago

Okay, I re-read your question. Sorry for the wrong answer. If I am able to solve it I will update the answer.

Ade Over a year ago

I've completely rewritten it as a simplified scenario. Hopefully clearer now.

Collectives™ on Stack Overflow

Dynamically update 'max' validation in AngularJS

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related