AngularJS摘要循环错误,ngmodel在自定义验证时擦除

时间:2015-02-17 19:31:49

标签: javascript html angularjs web angularjs-directive

作为一个相对较新的AngularJS的人,我在为下拉选择编写自定义验证时遇到了一个非常奇怪的错误。

正如您所料,我用

写下了这个下拉列表
<select name="somename" id="someid" ng-model="foo" ng-model-options="{allowInvalid: true}"  validate-input>
 <option></option> 
 <option></option>
</select>

在这种情况下,validate-input是我的自定义指令。它是这样写的:

directives.directive("validateInput", function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, ele, attrs, ctrl) {
            ctrl.$validators.isAcceptable = function (value) {

                var status = false;

                if (value === '0') {
                    status = true;
                }

                return status;

            };
        }
    }
});

在这种情况下,isAcceptable是我正在创建的标志。

无论如何,对于实际问题本身。每当我启动应用程序时,我发现ng-model的实际值是“擦除”。也就是说,它要么是未知的,要么是NaN(取决于当然的输入)。为了解决这个问题,我在select标签中添加了以下指令:ng-model-options =“{allowInvalid:true} 但是,这并没有解决我的问题。

这个问题如此重要的原因是当ng-model被错误的验证(设置为NaN或未知)擦除时,这会导致我的应用程序中的重大错误。我能找到的唯一解决方案是使ng-model =“0”或=“”(这是一个错误的验证)并保留这些值而不是从应用程序中擦除模型本身。

1 个答案:

答案 0 :(得分:1)

尝试这样的事情:

directives.directive("validateInput", function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, ele, attrs, ctrl) {
            ctrl.$validators.isAcceptable = function (modelValue, viewValue) {
                var value = modelValue || viewValue;
                return value === '0' ? true : false;
            };
        }
    }
});

modelValue仅在viewValue符合验证条件后设置。所以在init它是空白的,另一个验证器可能阻止它设置一个值。

您可能完全想要使用此格式:

directives.directive("validateInput", function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, ele, attrs, ctrl) {
            var setValidator = function (value) {
                var isValidFormat = function () {
                    return $value === '0' ? true : false;
                };
                ctrl.$setValidity('isAcceptable', isValidFormat);
                return value;
            };
            ctrl.$parsers.unshift(setValidator);
            ctrl.$formatters.unshift(setValidator);
        }
    }
});