Question

我在尝试将用户输入限制为数字时遇到了一个有趣的问题。

我的HTML看起来像这样：

<input name="activeDate" type="number" class="form-control" ng-model="account.tag.activeDate"></input>

...和我的相关Angular控制器代码一样（这是在点击处理程序中）：

tag.activeDate = moment.utc().add(tag.activeDate, tag.tagDurationType).toISOString();

不幸的是，当我点击提交我的表单并调用该单击处理程序的按钮时，我在控制台中收到此错误：

[ngModel:numfmt] Expected `2015-08-27T22:09:18.919Z` to be a number

在提交时，我的输入会在我的控制器中转换为日期时查看我的输入。如何将用户输入限制为数字而不会遇到此问题？

Answer 1

使用ng-pattern="/^(\d)+$/" - 这是简单的正则表达式

var app = angular.module('num', []);

app.controller('numCtrl', function($scope, $http){
  $scope.digits = {};
});
angular.bootstrap(document.body, ['num']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-controller="numCtrl">
    <form class="digits" name="digits" ng-submit="getGrades()" novalidate >
      <input type="text" placeholder="digits here plz" name="nums" ng-model="nums" required ng-pattern="/^(\d)+$/" />
      <p class="alert" ng-show="digits.nums.$error.pattern">Numbers only, please.</p> 
      <br>
      <input class="btn" type="submit" value="Do it!" ng-disabled="!digits.$valid" />
    </form>
  </body>

Answer 2

选择你的输入元素，然后执行以下操作，你必须查找number0Key和number9Key的值：

myElement.on("keypress", function(e) {
  if (e.which < number0Key || e.which > number9Key) {
    e.stopPropagation();
  }
});

验证输入类型=＆＃34;数字＆＃34;在提交之前

2 个答案: