我正在创建一个没有日历视图的输入元素的出生日期类型。即用户通过键入来填写日期。
代码
angular.module('myApp', [])
.directive('birthDatePicker', [ function () {
return {
restrict: 'A',
require: 'ngModel',
scope: {
model: '=ngModel',
},
link: function (scope, element, attrs, ngModel) {
//SET CURSOR POSITION
var setCursorPosition = function(pos) {
if (element[0].setSelectionRange) {
element[0].focus();
element[0].setSelectionRange(pos, pos);
} else if (element[0].createTextRange) {
var range = element[0].createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
};
// RESET VALIDATION ERRORS
var resetErrors = function() {
ngModel.$setValidity('pattern',true);
};
if (!ngModel) return;
var d1, d2, m1, m2, y1, y2, y3, y4, cursorPos, dateString, parsedDate;
ngModel.$parsers.unshift(function (inputValue) {
var digits = inputValue.split('').filter(function (s) { return (!isNaN(s) && s != ' '); });
d1 = digits[0] ? digits[0] : 'd';
d2 = digits[1] ? digits[1] : 'd';
m1 = digits[2] ? digits[2] : 'm';
m2 = digits[3] ? digits[3] : 'm';
y1 = digits[4] ? digits[4] : 'y';
y2 = digits[5] ? digits[5] : 'y';
y3 = digits[6] ? digits[6] : 'y';
y4 = digits[7] ? digits[7] : 'y';
dateString = d1+d2+'/'+m1+m2+'/'+y1+y2+y3+y4;
resetErrors();
if(dateString == 'dd/mm/yyyy') {
ngModel.$viewValue = '';
ngModel.$render();
return ngModel.$viewValue;
}
ngModel.$viewValue = dateString;
ngModel.$render();
cursorPos = digits.length + 2;
if(digits.length < 3) {
cursorPos = digits.length;
} else if (digits.length < 5) {
cursorPos = digits.length + 1;
}
setCursorPosition(cursorPos);
parsedDate = new Date(ngModel.$viewValue);
// validation for correct date
if(isNaN(parsedDate.getTime())){
ngModel.$setValidity('pattern',false);
return ngModel.$viewValue;
} else {
ngModel.$setValidity('pattern',true);
}
return ngModel.$viewValue;
});
}
};
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<body ng-app="myApp">
<form name="myForm" novalidate>
<input ng-model="date" name="question"
placeholder="dd/mm/yyyy" birth-date-picker type="tel" autocomplete="off" required>
<p ng-show="myForm.question.$error.required">Date is Required</p>
<p ng-show="myForm.question.$error['pattern']">Date is incorrect</p>
<input type="submit">
</form>
</body>
显示错误消息时出现问题。只有在第一次按下提交按钮时,才会显示消息
Date is required
。当用户按backspace
键清除输入值时,它不起作用。更新:
在较低版本的
AngularJS
上,它的工作正常,正如我所希望的,但是有了AngularJS 1.5.8
,我就倒霉了。:(请帮我解决这个问题。
快乐编码!
最佳答案
根据https://docs.angularjs.org/api/ngMessages/directive/ngMessages上的文档和该页上的示例,这是您应该如何使用ng消息。。。
angular.module('myApp', [])
.directive('birthDatePicker', [ function () {
return {
restrict: 'A',
require: 'ngModel',
scope: {
model: '=ngModel',
},
link: function (scope, element, attrs, ngModel) {
//SET CURSOR POSITION
var setCursorPosition = function(pos) {
if (element[0].setSelectionRange) {
element[0].focus();
element[0].setSelectionRange(pos, pos);
} else if (element[0].createTextRange) {
var range = element[0].createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
};
// RESET VALIDATION ERRORS
var resetErrors = function() {
ngModel.$setValidity('pattern',true);
};
if (!ngModel) return;
var d1, d2, m1, m2, y1, y2, y3, y4, cursorPos, dateString, parsedDate;
ngModel.$parsers.unshift(function (inputValue) {
var digits = inputValue.split('').filter(function (s) { return (!isNaN(s) && s != ' '); });
d1 = digits[0] ? digits[0] : 'd';
d2 = digits[1] ? digits[1] : 'd';
m1 = digits[2] ? digits[2] : 'm';
m2 = digits[3] ? digits[3] : 'm';
y1 = digits[4] ? digits[4] : 'y';
y2 = digits[5] ? digits[5] : 'y';
y3 = digits[6] ? digits[6] : 'y';
y4 = digits[7] ? digits[7] : 'y';
dateString = d1+d2+'/'+m1+m2+'/'+y1+y2+y3+y4;
resetErrors();
if(dateString == 'dd/mm/yyyy') {
ngModel.$viewValue = '';
ngModel.$render();
return ngModel.$viewValue;
}
ngModel.$viewValue = dateString;
ngModel.$render();
cursorPos = digits.length + 2;
if(digits.length < 3) {
cursorPos = digits.length;
} else if (digits.length < 5) {
cursorPos = digits.length + 1;
}
setCursorPosition(cursorPos);
parsedDate = new Date(ngModel.$viewValue);
// validation for correct date
if(isNaN(parsedDate.getTime())){
ngModel.$setValidity('pattern',false);
return ngModel.$viewValue;
} else {
ngModel.$setValidity('pattern',true);
}
return ngModel.$viewValue;
});
}
};
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<body ng-app="myApp">
<form name="myForm" novalidate>
<input ng-model="date" name="question"
placeholder="dd/mm/yyyy" birth-date-picker type="tel" autocomplete="off" required>
<div ng-messages="myForm.question.$error" role="alert">
<div ng-message="required">Date is Required</div>
<div ng-message="pattern">Date is incorrect</div>
</div>
<input type="submit">
</form>
</body>