Angular 1.3 中新内置的“解析"验证键的目的是什么? [英] What is the purpose of the new built in 'parse' validation key in Angular 1.3?

问题描述

ngModelController 解析管道的行为似乎在 Angular 1.2 和 1.3 之间发生了变化.我现在总是看到一个名为 'parse' 的新验证键添加到所有 $error 对象中，并且每当解析器之一返回 undefined 时，它就会覆盖/替换所有其他验证键可能已经设置了.

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.

例如，这是 Angular 1.2.23 中的一个工作示例 - 尝试输入一个超出范围的数字:

For instance, here is a working example in Angular 1.2.23 - try entering a number out of range:

http://jsfiddle.net/8doq0saf/5/

在 1.3-rc 下运行相同的东西给出了不同的结果:

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 将事情合理化，以明确区分解析和验证.

Angular 1.3 rationalized things to make a clean distinction between parsing and validating.

Angular 现在会自动向所有 $error 集合添加一个 'parse' 键，并相应地设置其值 - true 如果任何解析器返回 undefined, false 否则.

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.

对于不可解析的值(为数字输入的字母、格式错误的日期等)，我们应该从解析器返回 undefined.这将导致 Angular 删除任何已经设置的 $error 键，并用 { "parse": true } 替换整个对象.将不再运行解析器.模型不会更新.$parsers 数组现在应该只用于解析.

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 有一个新的 $validators 属性，我们可以为其分配验证功能.只有在解析管道成功时才会运行这些.对于可解析为所需数据类型但仅无效(字符串太长、数字超出范围等)的值，从这些函数之一返回 false.验证器函数的名称成为 $error 对象中的验证键.所有验证器都将运行，即使其中一个返回 false.只有在验证成功后才会更新模型.

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.

这可能是现有应用程序的重大更改，因为人们经常从解析器返回 undefined 以获得无效值.这是我所拥有的，这是一个典型的例子:

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.

这篇关于Angular 1.3 中新内置的“解析"验证键的目的是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！