min/max input validation is against $modelValue, not $viewValue

[edzius]

Hi,

I am using ngModelController.$parsers/$formatters pipeline to do the number conversion and default min/max validators. My problem is that validation is done against $modelValue. So in my case when i enter value that is still valid in view validators reports it is invalid in model.

I want to propose to do default (min/max/etc.) validation on $viewValue. This way input limitations applied by browser would match validators rules.

I've made plunker to ilustrate: http://plnkr.co/edit/1IOnf9HYjgHhvpD0QsI3?p=preview

Cheers,
Edvinas

[frfancha]

$viewValue is string, $modelValue is of the model type (number in your case).
This is why min/max/... only make sense on $modelValue

[Narretz]

I tend to agree that the HTML5 validators should work against the input values. This might break people's apps however. Might be something for 1.5

[edzius]

Sorry for the delay.

It definitely make sense to validate against $viewValue. From the ideological side in most of the cases validation messages should notify about errors of value that is currently visible on the screen. Also in some cases user might require validation for $modelValue, so validation target value (either $modelValue or $viewValue or both?) could be configurable in ng-model-options. And this way we could have backwards compatibility with older versions of angular.

By the way i took a peek into existing required/minlength/maxlength/pattern validators -- all of them validates against $viewValue..

[bogomips]

Hello,
I have the same opinion. I would set min e max in order to limit the $viewValue range, so errors should be consistent with that.
In my case i have an input that allowes different units of measure (let's say one could enter his body's height in inches and cm) so depending on users choice, I dinamically set a different min and max range. Anyway my $parsers value is always in cm because i choosed to send this unit in my db.
Is there any easy work around you guys would suggest? my only alternative is to write the logic inside a controller or better to build a new directive...

**UPDATE
I share my workaround, it could be useful for someone.
The problem was that the input status was invalid so "ng-change" did not get fire and the value was not saved on db.
I've just add ng-model-options="{allowInvalid:true}"
It works for me becouse i don't submit the form in a classic way but field by field when the user presses enter the field is in a blur status.
now i can finally set dinamically my min and max.

[belfz]

Any updates to this? I am using angular 1.5.8 and this problem still exists.

[petebacondarwin]

@Narretz can we discuss whether this should be considered "workaround-able"?

[Narretz]

It's work-aroundable as you can copy the validation code and apply it to the $viewValue instead of the $modelValue. However, I think for the sake of consistency we should change it to validate the $viewValue, and then the same applies for devs that want to validate the $modelValue.

For reference, the validation atm is as follows:

• required: viewValue
• pattern: viewValue
• maxlength / minlength: viewValue
• min / max for "date": modelValue (which is a Date object)
• min / max for "number": modelValue (which is a Number Object)
• step for "number": viewValue
• min / max / step for "range": viewValue

So it is inconsistent, but there's a tendency to validate the viewValue. While it might look like for date and number, it necessary to validate the modelValue because it has been converted to an Object, in range, we convert the viewValue to a Number for the step validation, so we can definitely transform the viewValue for the other validators as well.

Another idea I had was to make it configurable via ngModelOptions if $modelValue / $viewValue gets validated, but this might become too complex.