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

Question

您好，我正在开发 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>

我可以知道这是否可以完成吗？

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