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，我可以有42.44335并且它删除5等因此如果我第一次输入数字它正在工作。但是，如果我从一个数字开始，它应该删除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);
        }
    };
}]);

输入字段上的angular的$解析器在初始输入时有困难

1 个答案: