Question

我有一个AngularJS单页面应用程序。一个视图有一个文本框，我只想接受整数字段的数字。我在控制器和视图中的此文本框中输入了此代码，但是当我运行视图时，它接受任何键盘字符。你能告诉我如何修改它才能起作用吗？

＆＃13;

    $scope.FilterNumbersOnly = /^\d+$/;

                <input ng-model="x.COLUMN_VALUE" ng-pattern="FilterNumbersOnly" />

＆＃13;

Answer 1

从AngularJS documentation开始，当输入到基于文本的字段中的值未通过指定的正则表达式测试时，ng-pattern将在pattern对象上设置error键

这没有说明禁止用户输入文字。如果要添加该行为，则需要侦听pattern对象上的error键并为其附加处理程序。当输入无效时，错误对象将反映这一点，您应该通过阻止用户输入来响应。或者你可以采取你认为必要的任何行动。

为防止用户输入，您可以在设置disabled对象上的pattern键时在输入字段上设置error属性。

实现此目的的一种简单方法是使用ng-if指令。

<input disabled ng-if="!form.input.$valid" />
<input ng-if="form.input.$valid" />

这是link to a working example。

Answer 2

您可以使用以下方式执行此操作：

ngChange 指令;
ngMask 模块（总是我需要处理带有我使用它的面具的输入）。

我让这个代码段显示了两种方式：

＆＃13;

(function() {
  "use strict";
  angular.module('app', ['ngMask'])
    .controller('mainCtrl', function($scope) {
      $scope.checkNumber = function() {
        $scope.input = $scope.input.replace(/\D+/, '');
      }
    })
})();

＆＃13;

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ngMask/3.1.1/ngMask.min.js"></script>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body ng-controller="mainCtrl">
  <form name="form" novalidate>
    <label for="withoutMask">Input without mask: </label>
    <input type="text" id="withoutMask" ng-model="input" ng-change="checkNumber()">
    <hr>
    <label for="mask">Input with mask: </label>
    <input type="text" id="mask" mask="d" repeat="15" restrict="reject" limit="false" ng-model="otherInput">
  </form>
</body>

</html>

＆＃13;

Answer 3

为什么不使用内置的HTML支持？

<input type="number">

支持 - http://caniuse.com/#search=input%20type%3D%22number%22

为什么不会使用这种ng-pattern过滤器编号？

3 个答案: