javascript - 表单验证与独立指令相结合正在删除范围值

Question

当我将带有隔离作用域的指令与自定义验证结合起来时，验证失败时，验证会将我的 scope 值设置为 undefined。

这是一个带有代码的jsfiddle:http://jsfiddle.net/5mKU3/7/

HTML:

<div ng-app="myApp">
    <div ng-controller="example">
        someModel: {{someValue}}<br>
        <input type="text" isolate ng-model="someValue" validate />
    </div>
</div>

JS:

angular.module('myApp', []).directive('isolate', function () {
    return {
        require: 'ngModel',
        scope: {}
    };
}).directive('validate', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, ctrl) {
            ctrl.$parsers.unshift(function (value) {
                value = value || '';

                if (value.length < 10) {
                    ctrl.$setValidity('fail', true);
                    return value;
                } else {
                    ctrl.$setValidity('fail', false);
                    return undefined;
                }
            });
        }
    };
}).controller('example', function ($scope) {
    $scope.someValue = '1234';
});

当输入超过10个字符时验证失败。如何在验证失败时使 $scope.someValue 不会重置为 undefined？

我当前使用的 Angular 版本是 1.2.18。

Answer 1

设置 ngModelOptions.allowInvalid 至true 。

您的输入如下:

<input type="text" isolate ng-model="someValue" validate ng-model-options="{allowInvalid:true}"/>

通过 $validate() method's description 验证此信息