手动输入的日期未被验证 - uib datepicker popup答案

【问题标题】：Manually entered date is not being validated - uib datepicker popup手动输入的日期未被验证 - uib datepicker popup
【发布时间】：2017-10-06 15:53:50
【问题描述】：

我使用的是 0.14.3 angular-bootstrap 版本。我对 uib-datepicker-popup 的最小和最大验证有疑问。 min-date 和 max-date 按预期工作，弹出视图中禁用日期。但是，如果我在输入文本验证中手动输入日期不存在......我甚至添加了 min 和 max 属性，但没有再添加。签入form.$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 设置为对应的最小值或最大值时，我是否可以通过某种方式检查日期验证？

【问题讨论】：

<input> 元素缺少ng-model 指令。我很惊讶您没有在控制台中看到错误。
另外，<div> 元素在 <span> 元素中也是非法的。
@georgeawg 抱歉，这是复制/粘贴错字...当然我有 ng-model.. :)

标签： angularjs validation datepicker angular-ui-bootstrap

【解决方案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);
            }
        }

【讨论】：