Angular 可选最大值最小值的输入验证始终无效

Question

我正在构建一个向 input['date'] 元素添加一些逻辑的指令。这就是我现在拥有的：

app.directive('calendarInput', function() {
    'use strict';
    return {
        template : '<input type="date"' +
                            'ng-model="calendarInput"' +
                            'min="{{min}}"' +
                            'max="{{max}}" />'
        replace: true,
        scope: {
            startdate : '@',
            enddate : '@',
            calendarInput: '='
        },
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch('startdate', function (val) {
                if (val) {
                    var date = new Date(val);
                    scope.min = date.toIsoString().split('T')[0];
                }
            });
            scope.$watch('enddate', function (val) {
                if (val) {
                    var date = new Date(val);
                    scope.max = date.toIsoString().split('T')[0];
                }
            });
        }
    };
});

想法是重用这个指令。有时只有开始日期，有时只有结束日期。像这样：

<div calendar-input="item.birthday" enddate="'1990-01-01'"></div>

不幸的是，这总是导致 class ng-invalid-min 的无效表单。这是因为我没有提供开始日期参数。

如何让最小值或最大值可选？

编辑：我正在使用 Angular 1.3.9

Answer 1

找到了一种按需编译 max 和 min 属性的方法。

app.directive('calendarInput', function($compile) {
    'use strict';
    return {
        template : '<input type="date" class="datepicker" ng-model="omdCalendarInput" />',
        replace: true,
        scope: {
            startdate : '@',
            enddate : '@',
            calendarInput: '='
        },
        restrict: 'CA',
        link: function (scope, element, attrs) {

            var dateInput = element.find('input') // <----

            scope.$watch('startdate', function (val) {
                if (val) {
                    var date = new Date(val);
                    scope.min = date.toIsoString().split('T')[0];
                    if (!dateInput.attr('min')) { // <----
                        dateInput.attr('min', '{{min}}'); // <----
                        $compile(dateInput)(scope); // <----
                    }
                }
            });
            scope.$watch('enddate', function (val) {
                if (val) {
                    var date = new Date(val);
                    scope.max = date.toIsoString().split('T')[0];
                    if (!dateInput.attr('max')) { // <----
                        dateInput.attr('max', '{{max}}'); // <----
                        $compile(dateInput)(scope); // <----
                    }
                }
            });
        }
    };
});

Relevant Link

编辑：改进了上面的代码。我也将此标记为正确答案，因为没有其他人有解决方案。

Answer 2

。谢谢。

吹毛求疵 - 可能要更改：

scope.min = date.toIsoString().split('T')[0];

到

scope.min = $format('date')(date, 'yyyy-MM-dd');

让它更有棱角。

Angular 可选最大值最小值的输入验证始终无效

Angular input validation with optional max min always invalid

angularjs

angularjs-directive