2016-03-30 26 views
1

123.123のような小数点の前後の数を制限する方法は、前に最大3つの数値を持つことができます。最大3つの数字が続きます。入力番号の小数点前後の制限番号

<div class="form-group"> 
    <input type="number" class="form-control" name="ta" id="ta" placeholder="ta" ng-model="ta.kol" ng-maxlength="15"/> 
    <p ng-show="taForm.kol.$error.maxlength" class="help-block">Max 15 symbols !</p> 
    </div> 
+0

あなたはngのマスクのような外部のプラグインを検討してください純粋な角型ソリューションが必要ですか? https://github.com/candreoliveira/ngMask –

+0

興味深いプラグインですが、もっと単純な解決策があればそれが良いでしょう。さもなければ、やらなければならないでしょう – Mark

+0

すでに 'number'型を使っているので、 'max'属性の値(999.999)、' min'に対応する値、 'step'属性0.001 – Loufylouf

答えて

0

あなたは、入力フィールド上のonchangeイベントを追加し、正規表現を使用して、現在の入力値を検証し、ユーザーに同じ通信機能を呼び出すことができます。

Regex : ^[0-9]{0,3}.?[0-9]{0,3}$

JSコードを検証します

function validateNumberInput(inputNumber){ 
    return number.search(/^[0-9]{0,3}.?[0-9]{0,3}$/) == 0 ? true : false; 
} 

また、あなたが同じことを扱うことができる角度でディレクティブを書くことができます。

+0

、thx – Mark

0

あなただけの入力にイベントリスナを追加し、あなたはその後、両方の部分の長さをチェックし、それに応じて行動することができ、小数点の入力を分割する場合、これはjavascriptの簡単な作品で解決することができます。

https://jsfiddle.net/pk07net6/

function checkNumbers() 
{ 
    console.log(this.value); 
    var numbers = this.value.split('.'); 
    var preDecimal = numbers[0]; 
    var postDecimal = numbers[1]; 

    if (preDecimal.length>3 || postDecimal.length>3) 
    { 
     alert("Max 3 numbers before and after the decimal point.") 
    this.select(); 
    } 
} 

//ADD LISTENER TO INPUT 
var input = document.getElementById("numberInput"); 
console.log(input); 
input.addEventListener("change", checkNumbers) 
1

あなたは正規表現でng-patternを使用することができます。

<input ng-pattern="/^[0-9]{1,3}(\.\d{0,3})?/" />

ドキュメント:端数についてはhttps://docs.angularjs.org/api/ng/directive/ngPattern

+0

ng-patternの中で変数を使うときは、バックスラッシュをエスケープする必要があります。バックスラッシュがエスケープされており、カンマ '^ \\ d {1,6}([\\。\\、] \\ d {0,2})を受け入れます。 –

0

あなたは角数のフィルタを使用することができるように、そのかなり簡単に。最後に、あなたがこのようなものになってしまいますので、

app.filter('beforeDigit', function ($filter) { 
    return function (input) { 
    if (input>1000) 
     return (input % 1000) 
    elseif(input<1000) 
     return input; 
    }; 
}); 

:数字の前の数字のためとして、あなたは、このようにフィルタを作成する必要があります

{{val | filter:{number:3}, filter:beforeDigit }} 
関連する問題