仅在特定页面上对整数进行角度验证

时间:2016-01-28 01:45:33

标签: javascript angularjs validation

我有一个全局模板(inputfield.directive.tpl.html),我的所有表单都使用它来默认接受十进制数字:

<div class="ea-input-group">
  <div class="ea-input-addon currency {{currency | lowercase}}" ng-if="eaPreAddon">{{eaPreAddon}}</div>
  <input 
  ng-change ="onChange()"
  class="ea-input cashier-amount-field" 
  type="number" 
  placeholder="{{eaPlaceholder}}" 
  required="{{eaRequired}}" 
  name="{{eaName}}" 
  ng-pattern="/^(?:[1-9]\d*|0)?(?:\.\d+)?$/"
  ng-model="ngModel"
  min="{{eaMin}}"
  max="{{eaMax}}"
  ng-model-options="{allowInvalid: true}"
  is-number
  />
</div>

及其全局指令(inputfield.directive.js):

(function(app) {
'use strict';


  function CashierAmountField() {
    return {
      scope: {
        ngModel: '=',
        eaName: '@',
        eaPlaceholder: '@',
        eaRequired: '@',
        eaPreAddon: '@',
        eaMin: '@',
        eaMax: '@'
      },
      require: 'ngModel',
      restrict: 'E',
      replace: true,
      templateUrl: 'app/core/directives/inputfield/inputfield.directive.tpl.html',
      controller: function($scope, $player, $rootScope){
          $scope.currency =  $player.get('currencyCode');

          $scope.onChange = function(){
              $rootScope.promotionClicked = false;  
          }

      }
    };
  }

  app.directive('cashierInputField', CashierAmountField);

})(angular.module('cashierCore'));

现在,特定页面只需要接受整数而不是小数。我需要验证输入检查,如果用户输入了小数或者在提交之前粘贴了一个带有小数的值。

调用上面的指令/模板的表单结构对特定条件进行ng-message验证:

<cashier-input-field ng-model="details.amount" ea-placeholder="{{'placeholder.deposit.amount'|translate}}" ea-name="amountFld" ea-required="true" ea-min="{{paymentDetails.min}}" ea-max="{{paymentDetails.max}}" ea-pre-addon="&yen;" after-render="onAmountFieldLoaded">
            </cashier-input-field>
            <div ng-messages="ewalletform.amountFld.$error" ng-show="ewalletform.amountFld.$invalid  && ewalletform.amountFld.$touched" class="ea-msg ng-active">
                <div ng-message="required" class="ng-scope">{{'field.error.required'|translate}}</div>
                <div ng-message="number" class="ng-scope">{{'field.error.number'|translate}}</div>
                <div ng-message="pattern" class="ng-scope">{{'field.error.pattern'|translate}}</div>
                <div ng-message="min" class="ng-scope">{{'field.error.min'|translate}} ({{'field.error.min.abbr'|translate}} = <span ng-bind-html="currencySymbol"></span>{{paymentDetails.min}})</div>
                <div ng-message="max" class="ng-scope">{{'field.error.max'|translate}} ({{'field.error.max.abbr'|translate}} = <span ng-bind-html="currencySymbol"></span>{{paymentDetails.max}})</div>
            </div>

我如何为特定页面专门添加不同的验证规则,因为我已经可以通过响应过滤/确定它是什么页面(即&#39; PAGE_SAMPLE3&#39;)?唯一的问题是其他人都在使用inputfield,所以我不能只添加一个仅包含错误信息的整数验证。

0 个答案:

没有答案