2

ページで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 が発生し、今は役に立たない以前の値が残っています...

あなたの時間と応答に感謝します。

4

3 に答える 3

7

検証のはるかに優れた方法は、ディレクティブを使用して検証ルールを追加することです。

.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 の場合 (日付が数値または空の場合)、検証によって入力が有効としてマークされます。

于 2015-05-27T00:32:12.533 に答える
2

バリデータ コールバックをとイベントの#inpDate両方にバインドすることで値を簡単に検証できます。その後、コールバックがトリガーされたときに、入力の有効性を確認できます。changekeyup

$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したことを確認してください。

于 2014-05-11T18:57:17.490 に答える
-1

そのように検証したい場合は、使用できます

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

$scope.checkDateValidityこれは関数の先頭にあります

于 2014-05-11T18:21:19.547 に答える