指令接受数字并在文本字段中清空

时间:2017-02-03 13:17:11

标签: javascript html angularjs regex

您好我使用一个指令只接受我的文本字段中的数字:

HTML:

 <form name="filtroForm">
    <input id="idMatricula" type="text" class="form-control" ng-model="filtros.Matricula" maxlength="20" numbers-only>
...

模块:

var app = angular.module('app', []);
angular.module('sg-pbm').directive('numbersOnly', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attr, ngModelCtrl) {
            function fromUser(text) {
                if (text) {
                    var transformedInput = text.replace(/[^0-9]/g, '');
                    if (transformedInput !== text) {
                        ngModelCtrl.$setViewValue(transformedInput);
                        ngModelCtrl.$render();
                    }
                    return transformedInput;
                }
                return undefined;
            }
            ngModelCtrl.$parsers.push(fromUser);
        }
    };
});

但是当我在我的控制器中使用时:

 console.log($scope.filtroForm.$valid);

如果我输入任何删除它之后我的文本没有数据,我的表达式返回false。

1 个答案:

答案 0 :(得分:1)

我已经修改了你的指令

app.directive('numbersOnly', function () {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, modelCtrl) {
          modelCtrl.$parsers.push(function (inputValue) {
            if (inputValue == undefined) return ''
              var transformedInput = inputValue.replace(/[^0-9]/g, '');
              if (transformedInput!=inputValue) {
                modelCtrl.$setViewValue(transformedInput);
                modelCtrl.$render();
              }
              return transformedInput;
          });
        }
    };
});

看看这个plunker

此指令不允许您在输入框中输入除数字之外的任何内容。