ngMin/ngMax don't set min/max attributes

[twhitbeck]

It'd be nice if ngMin and ngMax set the min and max attributes accordingly. Similarly to how ngSrc and ngHref do. I realize I can use ng-attr-min and ng-attr-max, but that extra step seems unnecessary.

Ideally, for date types the same date parsing/formatting would be used as in the input directive for the respective types, but this behavior should happen even when there's no ngModel directive on the element. That means this needs to happen outside the directive linking function (since it doesn't get called if there's no ngModel directive present).

[pkozlowski-opensource]

It'd be nice

Could you elaborate? What is the actual use-case?

[twhitbeck]

In Chrome, if there's a min or max attribute on an date input or input[type=number], the native datepicker/number picker widgets impose some restrictions. For example, if an input[type=date] has a min attribute of 2015-01-01, you won't be able to select a date prior to 2015-01-01 in the calendar date picker.

[gkalpak]

Why not just use min/max ?
What do I miss ?

[twhitbeck]

I think ngMin and ngMax should work like ngRequired. ngRequired exists so you can bind to the required attribute, and I expected ngMin and ngMax to do the same.
With ngMin say, I could bind to a date object on the scope which would set the min attribute on the element, so that in Chrome when I open the the datepicker I can't choose a date prior to that date.

[gkalpak]

ngRequired works the way it does, only because required is a boolean attribute.
min/max are not boolean attributes, therefore ngMin/ngMax don't have to work that way.

Basically, most of the validation directives (ngMin, ngMax, ngMinlength, ngMaxlength, ngPattern) work is the same way. ngRequired is the exception (for the reason described above).

[twhitbeck]

I wasn't saying these would be needed or useful for the same reason as ngRequired.

If ngMin and ngMax also set the min and max attributes, then all I would have to do is add those attributes to my input and I would get the additional benefit of HTML5 datepicker widgets having proper restrictions in addition to the angular form validation. Does that make sense?

[gkalpak]

Yes and...no :)
You can use min/max (which is understood by both Angular and HTML5).

[twhitbeck]

yes, but the benefit of ngMin/ngMax is that it is evaluated against the scope.

Take this example:

<input type="date" ng-model="minDate">
<input type="date" ng-model="date" ng-min="minDate">

Can you give me an example of what you mean?

[gkalpak]

@twhitbeck, you can use interpolation (with min/max). E.g.:

// In the controller:
$scope.minDate = '2015-04-01';
$scope.maxDate = '2015-04-30';

<!-- In the view:
<input type="date" ... min="{{minDate}}" max="{{maxDate}}" />

Demo

[twhitbeck]

But what if I want to bind to a date, not a string, as in my example? In my situation I have one input[type=date] bound to property on the scope. On another I want to set the min to that date.
I realize I could do min="{{minDate | date:'yyyy-MM-dd'}}", but that feels clunky.

this might be out of scope, but I just wanted to suggest it as a nice-to-have.

There is no documentation on ngMin or ngMax, so I would be happy if there was some documentation and this caveat was listed in there.

• ngMin/ngMax don't automatically set the min/max attribute, so if you want the benefit of browsers with HTML5 date input widgets correctly restricting user input, don't forget to add min/max="{{theDate | date:'yyyy-MM-dd'}}" for input[type=date] or min/max="{{theDate | date:'yyyy-MM'}}" for input[type=month]

[gkalpak]

I know it's annoying that ngMin/ngMax takes a date, while min/max takes a string. E.g. you don't have the same issue with type="number" where min/max and ngMin/ngMax).

Your comment mentions don't forget to add, which is incorrectly implying that both ngMin/ngMax and min/max are needed. This is not true; you should just use one of both.

The difference between them (funtinality-wise), which is also the reason why Angular supports both forms and why it is not a good idea for ngXyz to automatically set xyz, is that min/max activates both Angular and native HTML5 validation (which might not be always desirable). In contrary, ngMin/ngMax activates Angular validation only.

So, each one is appropriate for different usecases.

The only thing that I think can be improved here, is a mention in the docs that (for date-related inputs), if you want both Angular and HTML5 validation, you can use min/max="{{dateObj | date:'yyyy-MM-dd'}}".

[realityking]

@gkalpak How is that different from ngRequired also activating HTML5 form validation?

Consider that according to the HTML5 spec at least for the number input the attribute min maps to aria-valuemin and is exposed to accessibility solutions.