日期驗證的角度指令

我想創建一個指令，檢查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（Jerusalem Daylight Time）」不符合所需格式「yyyy-MM-dd」。

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

感謝名單

來源

2016-09-18 user384496

嘗試'$ CTRL $ setViewValue;'。 – Claies

試試這個，它不會重置該字段。雖然在控制檯中沒有錯誤。 – user384496

它被重置爲沒有日期，如：「mm/dd/yyy」我想將字段重置爲當前日期。 – user384496

指令解決方案：

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>

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

另一個指令，增加了NG-模糊的元素

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

（。新的日期（）toLocaleDateString（））：

HTML

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

plunker http://plnkr.co/edit/U9KtoffbnCXNeAWcWLEC?p=preview

來源

2016-09-18 20:34:09 Andriy

這太好了。謝謝。 – user384496

你不需要的指令，只需驗證您的輸入與ng-blur：

HTML

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

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

    vm.bDate = new Date(); 

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

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

來源

2016-09-18 19:46:45 Andriy

我用ng-change做這件事，但據說，因爲我有一個不同的控制器中的日期輸入，我雖然保存一些打字.. 我沒有模糊的具體需要，我可以使用'改變'事件，甚至'看'。有沒有辦法做到這一點與指示？ – user384496

日期驗證的角度指令

回答

相關問題