最大值和最小值不适用于输入答案

【问题标题】：Max and min not working on input最大值和最小值不适用于输入
【发布时间】：2018-08-07 07:36:02
【问题描述】：

在 angularjs 应用程序中，我有输入字段，我需要在其中输入数字。我像这样设置最大值和最小值

<input type="number" min="0" max="{{totaImpressionsSum}}"/>

在$scope.totaImpressionsSum 上，我从控制器获取值，在这种情况下，该值为 5000。

当我在控制台中检查时，最大值已正确设置。

我也尝试使用 ng-max 和 ng-min... 但是这不起作用，我仍然可以输入小于 0 和大于 5000 的数字。

我做错了什么？在另一个地方这工作正常......但这里不是......

这里是plunker

【问题讨论】：

你能在 fiddler 重现这种情况吗？
@SlavaUtesinov 我更新了我的问题
如果我没记错的话，这是浏览器的问题。例如，chrome 的行为与 firefox 不同...
这是预期的行为。如果要防止用户输入超出指定范围的值，则需要编写自己的逻辑来限制最小/最大值。
这也不是浏览器实现它的方式。处理验证时会考虑 min/max 属性，但作为用户，您可以输入无效输入（根据 min/max 约束）。

标签： angularjs

【解决方案1】：

min/max 属性不是这样工作的 - 在处理有效性时会考虑它们，但它们不会限制用户输入的内容。

想象一下，您将在那里输入min="10"，然后您想输入数字10。但是您不能，因为您首先需要输入数字1，然后输入0，但数字1 本身不是有效的输入。

看看 MDN 例子他们是如何使用:valid 和:invalid 伪类的：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

【讨论】：

完美的解释，感谢分享。

【解决方案2】：

你只是缺少ng-model，我更新了你的plunkr

通过 min/max，您将能够使用 angularsjs 表单验证器。根据您要实现的目标，您可以根据表单验证禁用按钮。

这是一个更完整的例子：

<form name="myForm">
    <input type="number" ng-model="test" min="0" max="{{totaImpressionsSum}}"/>
    <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>

如您所见，我为表单命名。然后指令ng-disalbed 允许我在表单无效时禁用提交按钮。

【讨论】：

thnx，我只想念 plunker...在我的应用程序中我使用 ng-model，但仍然无法正常工作
应该是评论。
我正在写一个更完整的答案，我也更新了 plunkr