CODEWITHSUNDEEP
javascriptangularjs
Niranjan Godbole
Niranjan Godbole

Reputation: 2175

Angularjs multiple validations on same textbox

Hi I am developing angularjs application. I have textbox and i have custom directive attached to it. It should accept certain range of numbers for example between 100 to 200. It is working fine. Along with these validation i want required field validator on submitting form. At a time only one validation should be displayed. Below is 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>

validation error May i know if this can be done?

Upvotes: 1

Views: 214

Answers (1)

Vivz
Vivz

Reputation: 6620

The below is for directives error. 

   <span ng-show="form5.rangeNumber.$invalid && form5.rangeNumber.$dirty">
        {{ 'Value should be between' | translate }} {{min}} {{'and' | translate}} {{max}}</span>
       </span>

The required error on submitting

<span ng-show="form5.$submitted && form5.rangeNumber.$error.required">
          Required*
</span>

Combination to avoid both coming together

   <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>

Upvotes: 1

Related Questions