Angular input validation with optional max min always invalid

Question

I am building a directive that adds some logic to the input['date'] element. This is what I have right now:

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];
                }
            });
        }
    };
});

The idea is to reuse this directive. Sometimes there will be a startdate only, sometimes a enddate only. Like so:

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

Unfortunately this always results in an invalid form with the class ng-invalid-min. It's because I don't supply the startdate parameter.

How can I make min or max values optional?

Edit: I am using Angular 1.3.9

which version of angular js you are using?

Sanjiv
– Sanjiv

2015-01-20 09:17:25 +00:00
Commented Jan 20, 2015 at 9:17 — Sanjiv
– Sanjiv, Commented Jan 20, 2015 at 9:17
@Sanjiv it is Angular 1.3.9

Sven
– Sven

2015-01-20 09:36:37 +00:00
Commented Jan 20, 2015 at 9:36 — Sven
– Sven, Commented Jan 20, 2015 at 9:36

Community · Accepted Answer · 2017-05-23 11:43:51Z

Figured out a way to compile max and min attributes on demand.

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

EDIT: Improved the code above. Also I'm marking this as the correct answer, since nobody else has a solution.

Community · Accepted Answer · 2017-05-23 12:14:01Z

0

This is great, just what I needed. Thank you.

Nit-pick - might want to change:

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

to

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

to make it more angularish.

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Jul 24, 2015 at 19:04

dubaniewicz

771 silver badge5 bronze badges

Collectives™ on Stack Overflow

Angular input validation with optional max min always invalid

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related