AngularJS自定义指令,用于日期输入的表单验证



我有一个用Angular 1.5.3编写的应用程序。

这是我想做的:

我有一个有两种日期输入类型的用户表单。我需要在我的表单中添加一些自定义验证;到期日";形式上的";生效日期";

我相信我可以通过自定义指令和ng消息来做到这一点。

这是我的代码片段:

<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消息集成。

以下是我的尝试:http://jsfiddle.net/aubz88/q7n3abre/

ngMessages模块应该从cdn加载。或者与程序包管理器一起安装。AngularJS中不包含ngMessages模块。https://code.angularjs.org/1.4.14/docs/api/ngMessages
var app = angular.module("hello", ['ngMessages']);

其他几点。使用ngModel中的$validator。

ctrl.$validators.dateGreaterThan = validateDateRange;

使用范围属性传递其他日期

scope: {dateGreaterThan: '='},

我认为还有很多需要改进的地方。我也忘了一些AngularJS的东西。f.e.:当第一个日期更改时,您可以再次触发验证。检查的$validate函数https://code.angularjs.org/1.4.14/docs/api/ng/type/ngModel.NgModelController。

您可以查看此小提琴的基本设置:http://jsfiddle.net/hcjLkuzt/

最新更新