AngularJS 验证不检查 HTML 数字输入的步骤限制答案

【问题标题】：AngularJS Validation doesn't check step-Restriction of a HTML number inputAngularJS 验证不检查 HTML 数字输入的步骤限制
【发布时间】：2017-01-15 00:36:46
【问题描述】：

为什么 AngularJS 不检查第二个输入的 step="0.01" 属性？对于min 和max 属性，它可以完美运行，但不适用于step 属性。

例如：输入 0,005 将评估 submitNewEntryForm.submitNewEntryAmount.$valid 为真，但它不应该。

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

【问题讨论】：

标签： angularjs html forms

【解决方案1】：

添加正则表达式，例如\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}$

【讨论】：

【解决方案2】：

我没有意识到 step 属性有一个 Angular 指令。如果您查看文档，它似乎是最近添加的。

在您构建未发布的 1.5.9 版本之前，我发现没有提及 step 属性。

注意“用法”和“参数”部分列出了step 指令。现在使用左上角的下拉菜单更改版本，并观察没有提及step 指令。

这可能是一个全新的、未发布的功能......或者旧版本的文档可能不正确:)

【讨论】：

step 是input 标签的 HTML 属性，因此您在 Angular 文档中找不到它
@v-andrew 我回答的第二句话说，用于数字输入的step 指令记录在最新版本的 Angular 1.5.9 中。如果您阅读文档，他们会说它执行 OP 感兴趣的验证:)
但是您的回答与提出的问题无关。