我创建了针对验证nic no的指令,如下所示
CustomerCompanyApp.directive('nicOnly', function () {
return {
restrict: "A",
require: 'ngModel',
link: function (scope, elem, attrs, modelCtrl) {
var limit = parseInt(attrs.nicOnly);
elem.bind('keypress', function (e) {
//console.log(e.charCode);
if (elem[0].value.length >= limit) {
if (e.charCode != 0) {
//console.log(e.charCode);
e.preventDefault();
return false;
}
} else {
if (elem[0].value.length == limit - 1) {
modelCtrl.$parsers.push(function (inputValue) {
var transformedInput = inputValue ? inputValue.replace(/^[X|x|V|v]$/, '') : null;
if (transformedInput != inputValue) {
modelCtrl.$setViewValue(transformedInput);
modelCtrl.$render();
}
return transformedInput;
});
} else {
modelCtrl.$parsers.push(function (inputValue) {
var transformedInput = inputValue ? inputValue.replace(/[^\d]/g, '') : null;
if (transformedInput != inputValue) {
modelCtrl.$setViewValue(transformedInput);
modelCtrl.$render();
}
return transformedInput;
});
}
}
});
}
};
});
在chtml中
<div class="form-group">
<label class="control-label" for="customerNicNoforconfirmation">National identity card no</label>
<input class="form-control" type="text" name="customerNicNoforconfirmation" id="customerNicNoforconfirmation1" ng-model="customerNicNoforconfirmation" required="" nic-only="10">
<p ng-show="NicDetailsform.customerNicNoforconfirmation.$invalid && !NicDetailsform.customerNicNoforconfirmation.$pristine" class="danger">Customer Nic Required.</p>
</div>
在上面的指令中可以限制长度并仅输入数字。 但现在我想将此验证添加到我的指令
中在我的指令中它可以将整个输入长度限制为10,并且所有输入都只是数字。我无法找到克服其他要求的方法。
答案 0 :(得分:0)
我无法找到使用指令解决此问题的方法 最后我发现了ng-pattern来解决我的问题
<div class="form-group">
<label class="control-label" for="customerNicNoforconfirmation">National identity card no</label>
<input class="form-control" type="text" name="customerNicNoforconfirmation" id="customerNicNoforconfirmation" ng-model="customerNicNoforconfirmation" required="" ng-pattern="/^\d{9}[V|v|X|x]$/" limit-to="10">
<p ng-show="NicDetailsform.customerNicNoforconfirmation.$dirty && NicDetailsform.customerNicNoforconfirmation.$error.pattern" class="danger">First 9 characters must be numbers and last character must be V or X letter </p>
</div>
<强> NG-图案= “/ ^ \ d {9} [V | V | X | X] $ /”强>