Question

我正在使用0.14.3 angular-bootstrap版本。我对uib-datepicker-popup的最小和最大验证有问题。 min-date和max-date按预期工作，在弹出视图中禁用日期。但是，如果我在输入文本中输入手动日期验证不存在...我添加了甚至最小和最大属性，但没有再次。签入表格时。$ error且没有验证错误。

 <input id="projEndDate" class="form-control date-picker"
        uib-datepicker-popup="{{planningvm.format}}" 
        show-button-bar="false" 
        ng-model="reviewvm.review.projectedEndDt"
        data-ng-click="planningvm.openDatePicker('projEndDate')"
        placeholder="mm/dd/yyyy" name="projEndDate" show-weeks="false"
        required is-open="planningvm.projEndDate.opened"
        min="reviewvm.review.projectedStartDt"
        min-date="reviewvm.review.projectedStartDt" />
    <span data-ng-class="{'not-allowed input-group-addon' : !reviewvm.userReviewAssoc || !reviewvm.editMode, 'input-group-addon' : reviewvm.userReviewAssoc}"
                   data-ng-click="planningvm.openDatePicker('projEndDate')">
                   <div class="icon-calendar" id="icon-daterange-end" >
                   </div>
     </span>

当用户在输入中手动输入并将ng-model设置为min或max对应时，是否有某些方法可以检查日期验证？

Answer 1

当使用带有输入最小和最大验证的uib-datepicker-popup时，这似乎是一个已知问题：Datepicker input not validated for min and max when manually inserting date #4664它们不打算修复。我开发了一种解决方法，当输入值改变时执行验证：

            // watch date value
            scope.$watch((scope) => {
                //return object to watch.
                return this.date;
            }, (newValue: Date, oldValue: Date) => {
                this.onValueChange();
                });

        private onValueChange() {
            if (angular.isDefined(this.date) && this.date && !this.myForm.date.$error.date) {
                this.myForm.date.$setValidity("min", moment(this.date).isSameOrAfter(this.minDate));
                this.myForm.date.$setValidity("max", moment(this.date).isSameOrBefore(this.maxDate));
            } else {
                this.myForm.date.$setValidity("min", true);
                this.myForm.date.$setValidity("max", true);
            }
        }

手动输入的日期未经过验证 - uib datepicker弹出窗口

1 个答案: