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

问题描述

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

 
<p class="输入组"><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"关闭文本=关闭"占位符=截止日期"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></span></p>

为了验证日期输入，在我的控制器中，我有以下功能:

 $scope.checkDateValidity = function(){变量日期，已验证，任务日期；taskDate = $scope.task.date;日期 = 新日期(任务日期)；isValid = !isNaN(date);如果(有效){$scope.addButtonState.isOk = true;$scope.dateStatus.class = '';}别的{$scope.addButtonState.isOk = false;$scope.dateStatus.class = '有错误';}}

检查插入的日期是否有效一切正常，但问题是当日期输入留空(或从有效状态更改为空白)我也希望它是可以接受的，但是由于空输入和无效日期都是 undefined 我不知道如何在案例之间进行声明.

我也想过像这样直接读取输入文本:

document.getElementById('inpDate').value

但是当值改变时 ng-change 被触发，我留下了以前的值，现在没用了...

感谢您的时间和回复.

解决方案

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

$timeout(function(){有角的.element(document.getElementById('inpDate')).bind('keyup 更改', function(){变量输入值，自定义日期，已验证;inputValue = this.value;如果(输入值！= ''){自定义日期 = 新日期(输入值)；isValid = !isNaN(customDate);如果(有效){console.log('有效');//做点什么}别的{console.log('无效');//做其他事情}}别的{console.log('空');//做其他事情}});}, 400);

请确保您在控制器中注入了 $timeout.

I's using AngularJS and AngularJS bootstrap in my page. I have a date picker directive that looks like this:

    <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>

To validate the date input, in my controller I have the following function:

        $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';
        }
    }

everything works fine for checking if the date inserted is valid, but the problem is that when the date input is left blank(or changed from a valid state to blank) I want it to be acceptable too, but since both empty input and invalid date are undefinedI don't know how to declare between the cases.

I also thought of reading the input text directly like this:

document.getElementById('inpDate').value

but the ng-change is fired when the value is changed and I'm left with the previous value which is useless now...

thanks for your time and response.

解决方案

You can easily validate #inpDate value by binding validator callback to both change and keyup events, then when your callback triggered you can check the validity of your input.

$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);

Please make sure that your have injected $timeout in your controller.

这篇关于使用 ng-change、AngularJS 进行日期输入验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！