日期驗證的角度指令

Question

我想創建一個指令，以檢查在html日期提交時是否為空輸入，如果它為空，則將其重置為當前日期。 我毫不費力地用ng-change進行此檢查。

HTML代碼：

 <input type="date" class="form-control" id="birthDate"
                 ng-model="vm.bDate" ng-change="vm.dateValid(vm.bDate)">

以及控制器中的代碼：

  function dateValid(date) {
  vm.bDate = date || new Date();
}

這段代碼可以很好地工作，但是由於我的應用程序中有很多日期字段，因此我希望通過一條指令獲得完全相同的結果。

所以我實現了一個指令：

  $element.on('blur', function () {
  var pDate = Date.parse($ctrl.$modelValue);
  if (isNaN(pDate) === true) {
    $ctrl.$setViewValue(new Date());
    $ctrl.$render();
  }
});

和html：

 <input type="date" class="form-control" id="birthDate" valid-date=""
                 ng-model="vm.bDate">

當日期為空時（例如，我擦除年份），則在控制台中出現錯誤：

指定的值“ Sun Sep 18 2016 21:41:34 GMT + 0300（耶路撒冷夏時制）”與所要求的格式“ yyyy-MM-dd”不一致。

重置日期字段的適當方法是什么？

謝謝

Answer 1

您不需要指令，只需使用ng-blur驗證輸入：

的HTML

<input type="date" 
       class="form-control" 
       id="birthDate2"
       ng-model="vm.bDate" 
       ng-blur="vm.dateValid()">

JS

app.controller('MainCtrl', function($scope) {
  var vm = this;

  vm.bDate = new Date();

  vm.dateValid = function () {
    vm.bDate = vm.bDate || new Date();
  }
});

塞子： http ://plnkr.co/edit/32Ny4rnPreK2dGC5GMFo?p=preview

Answer 2

指令解決方案：

app.directive('validDate', function ($timeout) {
  return {
    scope: {
      ngModel: '='
    },
    bindToController: true,
    controllerAs: 'vm',
    link: function (scope, element, attrs, ctrl) {
      element.on('blur', function () {
        // using timeout instead of scope.$apply, notify angular of changes
        $timeout(function () {
          ctrl.ngModel = ctrl.ngModel || new Date();
        });
      });
    }, 
    controller: function () {}
  }
});

HTML：

<input type="date" 
       class="form-control" 
       id="birthDate2"
       ng-model="vm.bDate" 
       valid-date>

具有兩個答案的更新的插頭： http ://plnkr.co/edit/32Ny4rnPreK2dGC5GMFo?p=preview

另一個指令，將ng-blur添加到元素

JS

app.directive('vd', function ($compile) {
  return {
    link: function (scope, element) {
      element.attr('ng-blur', 'vm.dateValid()');
      $compile(element)(scope);
    }
  }
});

的HTML

<input type="date" 
       class="form-control" 
       id="birthDate2"
       ng-model="vm.bDate" 
       vd>

塞子： http ://plnkr.co/edit/U9KtoffbnCXNeAWcWLEC?p=preview