2016-07-22 12 views
0

これは次のhtmlコードです。この入力フィールドに小数点を置いてはいけません。入力タイプ番号 - 小数点を削除できません

誰かが私にこれを達成する方法を教えてもらえますか?

<input type="number" min="0" step="1" ng-pattern="/^(0|[1-9][0-9]*)$/" ng-model="params.data" /> 
+0

[javascriptの正規表現と単語が一致しない可能性があります]の複製があります(http://stackoverflow.com/questions/6449131/javascript-regular-expression-to-not-match-a-word) –

+0

フォーカスが取り去られた後の機能?彼らは093.4に入り、次の入力に行きます。この関数は093 – austinthedeveloper

+0

を返します。それもうまくいくでしょう。私にそのことのリンクを教えてください。 – Patrick

答えて

1

ngPatternはちょうどフォーム(formName.field.$error.pattern)内のフィールドを検証するために使用され、それはまだあなたの正規表現が一致しない場合でも、小数点または何を入力することができますことを心に留めておいてください。

あなたは使用してそれを行うことができます。

  1. ngChangeディレクティブを。
  2. ngMaskモジュール(私はそれを使用するマスクで入力を処理する必要があります)。

    (function() { 
     
        "use strict"; 
     
        angular 
     
        .module('app', ['ngMask']) 
     
        .controller('mainCtrl', mainCtrl); 
     
    
     
        function mainCtrl($scope) { 
     
        $scope.params = {}; 
     
        $scope.checkNumber = function() { 
     
         if ($scope.params.data) { 
     
         $scope.params.data = $scope.params.data.replace(/\D+/, ''); 
     
         } 
     
        } 
     
        } 
     
    })();
    <!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> 
     
    </head> 
     
    
     
    <body ng-controller="mainCtrl"> 
     
        <form name="form" novalidate> 
     
        <label for="withoutMask">Input without mask: </label> 
     
        <input type="text" id="withoutMask" ng-model="params.data" 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>

    私はそれが役に立てば幸い:

は、私は両方の方法を示す。このスニペットを作りましたよ!

関連する問題