使用ng-change进行日期输入验证,AngularJS

Question

我在我的页面中使用AngularJS和AngularJS引导程序.我有一个日期选择器指令,如下所示:

    <div class="form-group {{dateStatus.class}}">
        <p class="input-group">
            <input type="text" id="inpDate" class="form-control" 
                   datepicker-popup="dd-MMMM-yyyy" ng-model="task.date" 
                   is-open="datePickerStatus.isOpen" min-date="minDate" 
                   datepicker-options="dateOptions" ng-required="true" 
                   close-text="Close" placeholder="Due date" 
                   ng-change="checkDateValidity()"
            />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" 
                        ng-click="openDatePicker($event)"
                >
                    <i class="glyphicon glyphicon-calendar"></i>
                </button>
            </span>
        </p>
    </div>

要验证日期输入,在我的控制器中我有以下功能:

        $scope.checkDateValidity = function(){
        var date,
            isValid,
            taskDate;
        taskDate = $scope.task.date;
        date = new Date(taskDate);
        isValid = !isNaN(date);
        if(isValid) {
            $scope.addButtonState.isOk = true;
            $scope.dateStatus.class = '';
        }
        else{
            $scope.addButtonState.isOk = false;
            $scope.dateStatus.class = 'has-error';
        }
    }

一切正常,检查插入的日期是否有效,但问题是,当日期输入留空(或从有效状态更改为空白)我希望它也可以接受,但由于空输入和无效日期是undefined我不知道该怎么情况之间申报.

我还想过直接读取输入文本:

document.getElementById('inpDate').value

但是当值改变时触发了ng-change,而我留下了之前没用的前一个值......

谢谢你的时间和回应.

Answer 1

更好的验证方法是使用指令添加验证规则.

.directive("validateDate", function() {
     return {
         require: 'ngModel',
         link: function(scope, elm, attrs, ctrl) {
             ctrl.$validators.validateDate = function(modelValue, viewValue) {
                 if(!isNaN(modelValue) || ctrl.$isEmpty(modelValue)){
                     return true;
                 }
                 return false;
             };
         }
     };
 })

然后你只需要添加validate-date到输入标签,验证会将输入标记为有效,如果它是!isNaN(当日期是数字或为空时)