Angularjs在同一文本框上进行多次验证

时间:2017-07-19 13:31:22

标签: javascript angularjs

您好我正在开发angularjs应用程序。我有文本框,我附加了自定义指令。它应该接受某些范围的数字,例如100到200之间。它工作正常。除了这些验证,我还需要提交表单上的字段验证器。一次只能显示一个验证。下面是我的文本框。

<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 我可以知道是否可以这样做吗?

1 个答案:

答案 0 :(得分:1)

以下是指令错误。

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

提交时所需的错误

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

组合以避免两者聚在一起

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