Custom form validation directive to compare two fields
angularjs, angularjs-directive
Solution
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>
Problem
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?