Проверить истечение срока действия кредитной карты с угловым?

Question

Я не могу подтвердить свое поле даты.

Идея состоит в том, что когда пользователь вводит дату, подтвердите, если срок действия карты истек. Я сделал эту директиву, но я немного потерялся с директивами углового.

checkOut.directive('cardDateExpiration', function() { 
 
    return { 
 
     require: 'ngModel', 
 
     link: function(date) { 
 
     var currentDate = new Date(); 
 
     var m, y, d; 
 

 
     if (/^\d{2}\/\d{2}$/.test(date)) { 
 
      m = date.substring(0, 2) - 1; 
 
      y = 20 + date.slice(-2); 
 
      d = new Date(y, m); 
 
     } else if (/^\d{2}\/\d{4}$/.test(date)) { 
 
      m = date.substring(0, 2) - 1; 
 
      y = date.slice(-4); 
 
      d = new Date(y, m); 
 
     } else if (/^\d{4}$/.test(date)) { 
 
      m = date.substring(0, 2) - 1; 
 
      y = 20 + date.slice(-2); 
 
      d = new Date(y, m); 
 
     } 
 

 
     return currentDate > d; 
 
     } 
 
    } 
 
    });

<div class="large-6 columns sd-items-form"> 
 
    <label> 
 
    <input id="expiry_date" maxlength="5" name="datacard" card-date-expiration ng-disabled="" class="sd-field sd-txt-center p-l-0" ng-model="form.data.datacard" type="text" type placeholder="MM/YY" required></input> 
 
    </label> 
 
    <div class="error" ng-if="checkoutPayment.$submitted || checkoutPayment.datacard.$touched" ng-messages="checkoutPayment.datacard.$error"> 
 
    <p class="text-msg" ng-message="required">Not valid date credit card</p> 
 
    </div> 
 
</div>

Answer 1

У меня есть этот пример того, как сделать пользовательскую проверку входных полей в угловой здесь: http://jsfiddle.net/fortesl/2uv6xmjL/6/ Я использую momentjs для проверки даты, которые я рекомендую, но вы также можете разобрать введите строку, если хотите (я не рекомендую ее). Код приведен ниже:

app.directive('dateFieldValidator', [function() { 
var validateDate = function (date, format) { 
    if (!date.length) { 
     return true; 
    } 
    return moment(date, format.toUpperCase(), true).isValid(); 
}; 

return { 
    restrict: 'A', 
    require: 'ngModel', 
    scope: { 
     dateFormat: '@' 
    }, 
    link: function (scope, elem, attrs, ngModelCtrl) { 

     //For DOM -> model validation 
     ngModelCtrl.$parsers.unshift(function (value) { 
      var valid = validateDate(value, scope.dateFormat); 
      ngModelCtrl.$setValidity('validDate', valid); 
      return valid ? value : undefined; 
     }); 

     //For Model Update --> DOM 
     ngModelCtrl.$formatters.unshift(function (value) { 
      var valid = validateDate(value, scope.dateFormat); 
      ngModelCtrl.$setValidity('validDate', valid); 
      return value; 
     }); 
    } 
}; 

}]);

и вот пример HTML, который использует директиву:

<div ng-app="dateApp"> 
<div ng-controller="DateController as dateCtrl"> 
    <form name="dateForm" novalidate 
    ng-submit="dateCtrl.setDate(dateForm.dateInput.$valid); dateForm.dateInput.$setPristine();"> 
     Enter date: 
     <input name="dateInput" ng-model="dateCtrl.date" date-format="{{dateCtrl.format}}" 
     date-field-validator placeholder="{{dateCtrl.format}}"> 
     <button ng-disabled="dateForm.dateInput.$pristine">Submit</button> 
    </form> 
</div> 

Контроллер образца:

var app = angular.module('dateApp', []); 

app.controller ('DateController', функция() { var self = this;

self.format = 'MM/DD/YYYY'; 
self.date = ''; 

self.setDate = function (valid) { 
    if (valid) { 
     window.alert('You entered a valid Date: ' + self.date); 
    } else { 
     window.alert('!!!!!!!!!! WARNING: INVALID DATE !!!!!!!!!'); 
    } 
    self.date = ''; 
} 

)