我有一个全局模板(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="¥" 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,所以我不能只添加一个仅包含错误信息的整数验证。