Custom form validation directive to compare two fields

Question

I'm an angular newbie, and I'm stumbling over something in how angular's form validation directives work.

I know that I can fairly easily add directives to individual fields, but I'm trying to add a validation which will compare two form fields (both of which are elements of a model).

Here's a form skeleton:

<form name="edit_form" >   <input name="min" type="number" ng-model="field.min"/>   <input name="max" type="number" ng-model="field.max"/> </form>  <div class="error" ng-show="edit_form.min.$dirty || edit_form.max.$dirty">   <small class="error" ng-show="(what goes here?)">     Min cannot exceed max   </small> </div> 

In short, I want to write a directive and use it to show/hide this small.error if min and max both have values but min > max. How can I access both fields inside one directive? Is a directive the right tool for this job?

Answer 1

You do not need any directive. Just assign the "min" value of max to min-value. Like:

<input name="min" type="number" ng-model="field.min"/> <input name="max" type="number" ng-model="field.max" min=" {{ field.min }}"/> 

And you do not need any customization.
More: you can do min=" {{ field.min + 1}}"

Answer 2

Many ways to skin a cat.

PLUNKER

app.directive('lowerThan', [   function() {      var link = function($scope, $element, $attrs, ctrl) {        var validate = function(viewValue) {         var comparisonModel = $attrs.lowerThan;          if(!viewValue || !comparisonModel){           // It's valid because we have nothing to compare against           ctrl.$setValidity('lowerThan', true);         }          // It's valid if model is lower than the model we're comparing against         ctrl.$setValidity('lowerThan', parseInt(viewValue, 10) < parseInt(comparisonModel, 10) );         return viewValue;       };        ctrl.$parsers.unshift(validate);       ctrl.$formatters.push(validate);        $attrs.$observe('lowerThan', function(comparisonModel){         // Whenever the comparison model changes we'll re-validate         return validate(ctrl.$viewValue);       });      };      return {       require: 'ngModel',       link: link     };    } ]); 

Usage:

<input name="min" type="number" ng-model="field.min" lower-than="{{field.max}}" /> <span class="error" ng-show="form.min.$error.lowerThan">   Min cannot exceed max. </span>