angularjs - ngpattern and custom validation is both displayed - angularjs

Question

I have a min and max directive that I've created which checks if an input is between a range. I also have an ng-pattern validation. I'm using ng-messages to display my validation. I have an issue where even though user has entered in the correct pattern, the validation message for "pattern" is still displaying. I only would like to display the validation that the range is outside the range. Here is the html
<form name="fee">
<input type="text" name="fee_classi" ng-model="main.fee.I"
ng-pattern="/^[0-1](\.\d{0,2}){0,1}$/"
my-range="1,1.75"/>
<div role="alert" class="validation-errors"
ng-if="fee.fee_classi.$invalid && fee.fee_classi.$dirty"
ng-messages="fee.fee_classi.$error">
<p ng-message="range">Range should be between 1 to 1.75</p>
<p ng-message="pattern">Format must be 0.00</p>
</div>
</form>
Here is the directive
app.directive('myRange', myRange);
function myRange() {
var directive = {
bindToController: true,
controller: myRangeCtrl,
controllerAs: 'vm',
// link: link,
restrict: 'A',
scope: {},
require: {
ngModelCtrl: 'ngModel'
}
};
return directive;
}
myRangeCtrl.$inject = ['$element', '$attrs'];
function myRangeCtrl($element, $attrs) {
var vm = this;
vm.min = 0; //default
vm.max = 0; //default
console.clear();
console.log(vm.ngModelCtrl);
var inRange = false;
var rangeVal = $attrs.myRange.split(',');
var userInput;
console.log(rangeVal);
vm.min = JSON.parse(rangeVal[0]);
vm.max = JSON.parse(rangeVal[1]);
$element.on('keypress', function(e) {
console.log(e);
console.log(vm.ngModelCtrl);
//if the pattern is valid then lets check if the user has the proper range
if (vm.ngModelCtrl.$valid) {
vm.ngModelCtrl.$validators.range = function(modelValue, viewValue) {
console.log('modelValue = ' + modelValue);
inRange = _.inRange(modelValue, vm.min, vm.max);
//check if modelValue can be converted to a number with isNaN function
if (isNaN(modelValue)) {
console.error('-VAlue is invalid');
return false;
}
if (angular.isDefined(modelValue) &&
modelValue[modelValue.length - 1] !== '.' &&
modelValue !== '') {
// console.log('modelValue = '+modelValue);
userInput = JSON.parse(modelValue);
if (inRange || userInput === vm.max) {
console.info('VAlue is valid');
//value entered is invalid
return true;
} else {
console.error('VAlue is invalid');
//value entered is valid
return false;
}
}
if (angular.isUndefined(modelValue)) {
return true;
}
//lets do a regex test first
};
}
});
Here is the plunkr

Answer 1

Look at this example: https://docs.angularjs.org/api/ng/input/input%5Brange%5D
You may need to tweak it a bit to fit for your need.