AngularJS ValidationでHTML番号入力のステップ制限を確認しない

Question

AngularJSが2番目の入力のstep="0.01"属性をチェックしないのはなぜですか？ minとmax属性の場合、それは完全に機能しますが、step属性では機能しません。

たとえば、入力0,005はsubmitNewEntryForm.submitNewEntryAmount.$validをtrueに評価しますが、そうではありません。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 

 
<div ng-app=""> 
 

 
    <form class="form-inline" name="submitNewEntryForm"> 
 
    <div class="form-group" ng-class="submitNewEntryForm.submitNewEntrySubject.$valid ? 'has-success' : 'has-error'"> 
 
     <label for="subject">Betreff:</label> 
 
     <input type="text" class="form-control" id="subject" required name="submitNewEntrySubject" ng-model="submitNewEntrySubject"> 
 
    </div> 
 
    <div class="form-group" ng-class="submitNewEntryForm.submitNewEntryAmount.$valid ? 'has-success' : 'has-error'"> 
 
     <label for="amount">Betrag:</label> 
 
     <input type="number" class="form-control" id="amount" required name="submitNewEntryAmount" ng-model="submitNewEntryAmount" step="0.01" min="0" max="99999"> 
 
    </div> 
 
    <button type="submit" class="btn btn-primary" ng-disabled="!(submitNewEntryForm.submitNewEntrySubject.$valid && submitNewEntryForm.submitNewEntryAmount.$valid)" ng-click="">Submit</button> 
 
    </form> 
 

 
</div>

Answer 1

あなたはHTML5 pattern="^\d+\.\d{0,2}$"またはng-pattern="^\d+\.\d{0,2}$"を使用することができます \d+\.\d{0,2}のように、正規表現を追加します。これは、HTML入力を小数点以下2桁に制限することなくエラー状態を変更します。

は厳密であるために、私はそれを実現していなかったあなたは数が2小数点を持っていますが、それは.01よう0を招くことなくなるようにしたい場合は、あなたが^\d*\.\d{2}$

Answer 2

を使用することができます^\d{1,5}\.\d{,2}$

を使用する必要がありますstep属性のAngularディレクティブがありました。ドキュメントを見ると、それは非常に最近の追加のようです。

リリースされていない1.5.9バージョンをビルドするまでは、ステップ属性については言及していません。

最新版：stepディレクティブがリストされていることを「使用」と「引数」セクションでhttps://docs.angularjs.org/api/ng/input/input%5Bnumber%5D

注意してください。次に左上のプルダウンメニューを使用してバージョンを変更し、stepディレクティブの記述がないことを確認します。

これはブランドの新しい、未発表の機能です...または多分古いバージョンのドキュメントが:)