问题描述
这是我想要做的:
我有一个带有两种日期输入类型的用户表单。我需要在表单中添加一些自定义验证。当表单上的“到期日期”大于表单上的“生效日期”时,我想向用户显示错误消息。
我相信我可以使用自定义指令和ng-messages来做到这一点。
这是我的代码段:
<form name="form.mainForm">
<div>
<span>Effective Date: </span>
<input required type="date" name="effectiveDate" ng-model="effectiveDate" />
<div>
<span>Expiry Date: </span>
<input
type="date"
name="expiryDate"
ng-model="expiryDate"
date-greater-than="{{ effectiveDate }}" />
</div>
</div>
</form>
app.directive('dateGreaterThan',function () {
return {
restrict: 'A',require: 'ngModel',scope: false,link: function (scope,elm,attrs,ctrl) {
console.log(' here we are ');
function isValidDaterange(expiryDate,effectiveDate) {
console.log(expiryDate,effectiveDate);
if (effectiveDate == null || expiryDate == null ) {
return true;
}
return effectiveDate > expiryDate;
}
function validateDaterange(inputValue) {
var expiryDate = inputValue;
var effectiveDate = scope.effectiveDate;
var isValid = isValidDaterange(expiryDate,effectiveDate);
console.log("isValid: ",isValid);
ctrl.$setValidity('dateGreaterThan',isValid);
return inputValue;
}
ctrl.$parsers.unshift(validateDaterange);
ctrl.$formatters.push(validateDaterange);
attrs.$observe('dateGreaterThan',function () {
validateDaterange(ctrl.$viewValue);
});
}
};
我试图在这里解决问题,但是我的指令无法正常工作。它似乎并没有计算更改日期,也没有与ng-messages集成。
这是我的尝试: http://jsfiddle.net/aubz88/q7n3abre/
解决方法
应从CDN加载ngMessages模块。或与软件包管理器一起安装。 ngMessages模块不包含在AngularJS中。 https://code.angularjs.org/1.4.14/docs/api/ngMessages
var app = angular.module("hello",['ngMessages']);
其他一些要点。使用ngModel中的$ validators。
ctrl.$validators.dateGreaterThan = validateDateRange;
使用范围属性传递其他日期
scope: {dateGreaterThan: '='},
我认为还有很多需要改进的地方。我也确实忘记了一些AngularJS的东西。 f.e .:当第一个日期更改时,您可以再次触发验证。检查https://code.angularjs.org/1.4.14/docs/api/ng/type/ngModel.NgModelController的$ validate函数。
您可以检查此小提琴的基本设置:http://jsfiddle.net/hcjLkuzt/