The behavior of the ngModelController parsing pipeline seems to have changed between Angular 1.2 and 1.3. I now always see a new validation key named 'parse'
added to all $error
objects, and whenever one of the parsers returns undefined, it overrides/replaces all other validation keys that may have been already set.
For instance, here is a working example in Angular 1.2.23 - try entering a number out of range:
http://jsfiddle.net/8doq0saf/5/
The same thing running under 1.3-rc gives a different result:
http://jsfiddle.net/1t52s9b2/4/
I have not yet been able to find any documentation on this change. What is the purpose of the parse key, and how do I change my code to get back the old behavior?
angular.module('app', []).directive('number', function () {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
// valid number
ctrl.$parsers.push(function (value) {
var valid = angular.isUndefined(value) || value === '' || isFinite(value);
ctrl.$setValidity('number', valid);
return valid
? angular.isUndefined(value) || value === '' ? undefined : Number(value)
: undefined;
});
ctrl.$parsers.push(function (value) {
if (!angular.isDefined(attrs.minNumber)) {
return value;
}
var valid = angular.isUndefined(value) || Number(value) >= Number(attrs.minNumber);
ctrl.$setValidity('minNumber', valid);
return valid ? value : undefined;
});
ctrl.$parsers.push(function (value) {
if (!angular.isDefined(attrs.maxNumber)) {
return value;
}
var valid = angular.isUndefined(value) || Number(value) <= Number(attrs.maxNumber);
ctrl.$setValidity('maxNumber', valid);
return valid ? value : undefined;
});
}
};
});
Angular 1.3 rationalized things to make a clean distinction between parsing and validating.
Angular now automatically adds a 'parse' key to all $error
collections with its value set accordingly - true
if any of the parsers returned undefined
, false
otherwise.
For an unparsable value (alphas entered for a number, badly formatted date, etc), we should return undefined
from the parser. This will cause Angular to remove any $error
keys already set, and replace the entire object with just { "parse": true }
. No more parsers will be run. The model will not be updated. The $parsers
array should now only be used for parsing.
ngModelController has a new $validators
property, to which we can assign validation functions. These will only be run if the parsing pipeline was successful. Return false from one of these functions for a value that is parsable as the required datatype, but merely invalid (string too long, number out of range etc). The name of the validator function becomes the validation key in the $error
object. All validators will be run, even if one returns false
. The model will only be updated if validation is successful.
This is potentially a breaking change for existing applciations, as people frequently returned undefined
from parsers for an invalid value. Here is what I had, which is a typical example:
ctrl.$parsers.push(function (value) {
if (!angular.isDefined(attrs.minNumber)) {
return value;
}
var valid = angular.isUndefined(value) || Number(value) >= Number(attrs.minNumber);
ctrl.$setValidity('minNumber', valid);
return valid ? value : undefined;
});
Under this new scheme, this should be moved to a validation function instead:
ctrl.$validators.minNumber = function (value) {
return !value || !angular.isDefined(attrs.minNumber) || (value >= Number(attrs.minNumber));
});
Here is the directive with everything fixed up:
angular.module('app', []).directive('number', function () {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
// valid number
ctrl.$parsers.push(function (value) {
if(value === '') return value;
return isFinite(value) ? Number(value) : undefined;
});
ctrl.$validators.minNumber = function (value) {
return !value || !angular.isDefined(attrs.minNumber) || (value >= Number(attrs.minNumber));
};
ctrl.$validators.maxNumber = function (value) {
return !value || !angular.isDefined(attrs.maxNumber) || (value <= Number(attrs.maxNumber));
};
}
};
});
http://jsfiddle.net/snkesLv4/10/
I really like this new way - it is much cleaner.