У меня есть приложение, написанное на Angular 1.5.3.
Вот что я хочу сделать:
У меня есть пользовательская форма с двумя типами ввода даты. Мне нужно добавить пользовательскую проверку в мою форму. Я хочу показать пользователю сообщение об ошибке, когда дата истечения срока действия в форме больше, чем дата вступления в силу в форме.
Я считаю, что могу сделать это с помощью пользовательской директивы и 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-сообщениями.
Вот моя попытка: http://jsfiddle.net/aubz88/q7n3abre/