2015-08-27 48 views
2

我在嘗試將用戶輸入限制爲數字時遇到了一個有趣的問題。在提交之前驗證輸入類型=「數字」

我的HTML看起來像這樣:

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

...和喜歡,所以我的相關角控制器代碼(這是一個點擊處理器中):

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

不幸的是,當我按一下按鈕哪些提交我的表單和調用點擊處理程序我在我的控制檯中得到這個錯誤:

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

Lo當我的輸入被轉換爲我的控制器中的日期時,就會在提交時檢查我的輸入。我如何限制用戶輸入數字而不碰到這個?

回答

2

使用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>

0

選擇輸入元素,然後執行以下操作已查找number0Key和number9Key的價值:

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