javascript - angular 在输入字段上的 $parsers 在初始输入时遇到困难

Question

我在下面有完整工作元素的 plunker 链接

http://plnkr.co/edit/Q1iZwBp6LXlun4yHs7Dq?p=preview

这里只是一个简短的代码片段，可以跟随我的问题

var view_value;
function fromUser(text) {

    var return_value;

    if(text.match(pattern) === null){
    // if input is not the regex

    return_value = view_value;
    // alert("pattern not matched we need to reset input \nreturn value: " + return_value + "\nview_value: " + view_value);
    ngModelCtrl.$setViewValue(view_value);
    ngModelCtrl.$render();
    }
    else{
        //  alert("pattern matched we need to continue \nreturn value: " + return_value + "\nview_value: " + view_value);
        return_value = text;
        view_value = return_value;
    }

    return return_value;
    // if your return value is same as initial passin then it ends
}
ngModelCtrl.$parsers.push(fromUser);
// parser gets fired when UI updates

基本上我有一个输入字段，我也有一个正则表达式模式，当输入某些内容时，我检查这个正则表达式模式，如果它无效，那么我返回到最后一个已知的有效状态，这意味着 UI 更新。因此，无法将不属于我的正则表达式的无效字符或字符输入到我的输入中。只要您输入的第一个元素是有效字符(例如数字)，这一切都可以正常工作。然后您可以输入无效或有效的输入，并且它可以正常工作以防止错误输入并允许正确输入。所以唯一的问题是当第一个数字是无效字符时，比如“a”，那么输入不会被重置。这是因为我还没有最后一个有效状态。似乎只设置我的 var view_value = ""; 是显而易见的。然而，这会造成无限循环。

所以重申一下，我的输入只允许带小数点最多 4 位的正数。如果我输入 4 然后 a 它将删除 a，我可以有 42.44335 并且它删除 5 等所以如果我第一次输入数字它就可以工作。但是，如果我以 a 之类的数字开头，它应该删除 a，这样输入将再次为空，但它不会这样做，所以我只在第一个初始输入时遇到问题。

我该如何解决这个问题？

Answer 1

当第一个字符不是数字时，这解决了您的问题，同时还对您的代码进行了最少数量的更改:

app.directive('inputRestrictor', [function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attr, ngModelCtrl) {
            // changed here
            var pattern = /^(?:|(?:[0-9]+(?:\.[0-9]{0,4})?))$/g;
            var view_value;

            function fromUser(text) {
                var return_value;
                if (text.match(pattern) === null) {
                    return_value = view_value;
                    // changed here
                    ngModelCtrl.$setViewValue(view_value || '');
                    ngModelCtrl.$render();
                }
                else {
                    return_value = text;
                    view_value = return_value;
                }

                return return_value;
            }
            ngModelCtrl.$parsers.push(fromUser);
        }
    };
}]);