使用 ng-change、AngularJS 进行日期输入验证答案

【问题标题】：Date input validation using ng-change, AngularJS使用 ng-change、AngularJS 进行日期输入验证
【发布时间】：2014-05-11 17:51:40
【问题描述】：

我在我的页面中使用 AngularJS 和 AngularJS bootstrap。我有一个日期选择器指令，如下所示：

    <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，我只剩下以前的值，现在没用了......

感谢您的时间和回复。

【问题讨论】：

标签： javascript angularjs datepicker angular-ui-bootstrap angularjs-ng-change

【解决方案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（当日期为数字或为空时），验证会将输入标记为有效

【讨论】：

但无论结果如何，ng-change 仍然触发。我们是否应该将所有更改事件逻辑移至验证指令？

【解决方案2】：

您可以通过将验证器回调绑定到change 和keyup 事件来轻松验证#inpDate 值，然后当您的回调触发时，您可以检查输入的有效性。

$timeout(function(){        
    angular
        .element(document.getElementById('inpDate'))
        .bind('keyup change', function(){
            var inputValue,
                customDate,
                isValid;

            inputValue = this.value;
            if(inputValue != ''){
                customDate = new Date(inputValue);
                isValid = !isNaN(customDate);

                if(isValid){
                    console.log('Valid');
                    // do something
                }
                else{
                    console.log('Invalid');
                    // do something else
                }
            }
            else{
                console.log('Empty');
                // do something else
            }
        });
}, 400);

请确保您已在控制器中注入$timeout。

【讨论】：

不建议直接从控制器访问表单元素
@Kunal 是的，但我刚刚解决了一个特定问题。问题的作者可以构建一个指令并在其中使用此方法。

【解决方案3】：

如果你想这样验证，那么你可以使用

if(document.getElementById('inpDate').value === "" ){
            $scope.addButtonState.isOk = true;
            $scope.dateStatus.class = '';
}

$scope.checkDateValidity函数开头的this

【讨论】：

OP已经提到了，这个方法他试过了，还是不行。
Else validate $scope.task.date 这样，我不明白这里有什么不工作