Hello, I am currently working on an angularjs application where I have a textbox with a custom directive attached to it. This directive only accepts numbers within a certain range, for example between 100 to 200. The validation for this is working perfectly. However, in addition to this range validation, I also want a required field validator to be applied when the form is submitted. I need to ensure that only one validation message is displayed at a time. Below is the code snippet for my textbox:
<div class="inputblock" ng-class="{ 'has-error' : ((form5.$submitted && form5.rangeNumber.$invalid )|| (form5.rangeNumber.$invalid && form5.rangeNumber.$dirty))}">
<label class="inputblock-label">{{'Down Payment' | translate}}</label>
<div>
<span class="ang-error" style="color:#fff" ng-show="form5.rangeNumber.$dirty && form5.rangeNumber.$invalid">
<span ng-show="!(form5.$submitted && form5.rangeNumber.$error.required)&&form5.rangeNumber.$invalid && form5.rangeNumber.$dirty">
{{ 'Value should be between' | translate }} {{min}} {{'and' | translate}} {{max}}
</span>
</span>
</div>
<input class="" type="text" name="rangeNumber" ng-attr-placeholder="{{ 'DownPayment' }}" ng-model="DownPayment" range-number="range" required>
</div>
https://i.sstatic.net/sWMTZ.png Can this be implemented successfully?