AngularJS驗證不檢查步驟HTML數字輸入的限制

爲什麼AngularJS不檢查第二個輸入的step="0.01"屬性？對於min和max屬性，它可以很好地工作，但不適用於step屬性。AngularJS驗證不檢查步驟HTML數字輸入的限制

例如：輸入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>

來源

2016-09-07 d4rty

添加正則表達式，像\d+\.\d{0,2} 您可以使用HTML5 pattern="^\d+\.\d{0,2}$"或ng-pattern="^\d+\.\d{0,2}$"。它將錯誤狀態更改爲不將html輸入限制爲2個小數點。

要嚴格，你應該使用^\d{1,5}\.\d{,2}$

如果你想數有2個小數點，但允許它是沒有領先0像.01，你可以使用^\d*\.\d{2}$

來源

2016-09-10 16:21:32

我並沒有意識到，對於step屬性有一個Angular指令。如果你看看文檔，它似乎是一個非常新的補充。

直到你構建未發佈的1.5.9版本時，我才發現沒有提及step屬性。

最新版本：在「用法」和「參數」的step指令列出部分https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D

通知。現在使用左上方的下拉菜單更改版本，並注意到沒有提及step指令。

要麼這是一個全新的，未發佈的功能...或許對舊版本的文件是不正確的:)

來源

2016-09-10 16:46:33

'step'是input'標籤的'HTML屬性，所以你不能找到它在Angular documentation –

@ v-andrew我的答案的第二句話說，數字輸入的'step'指令記錄在Angular 1.5.9的最新版本中。如果您閱讀文檔，他們會說它執行OP感興趣的驗證:) –

但是，您的答案與問題無關。 –

AngularJS驗證不檢查步驟HTML數字輸入的限制

回答

相關問題