angularJS中文本类型的输入字段类似于ng-max答案

【问题标题】：What is similar to ng-max for input field of type text in angularJSangularJS中文本类型的输入字段类似于ng-max
【发布时间】：2016-01-07 03:23:58
【问题描述】：

我在模态表单上有一个十进制数字输入字段，我想确保用户在我的应用程序中输入的值小于另一个基值，如下所示。

<input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required max="data.baseNumber" />

但不知何故，ng-max 似乎没有触发此验证并将输入框设置为无效。我可能会错过什么？

我想将类型保持为文本，以便不显示向上和向下箭头。并且用户可以输入 4 位或 5 位带小数位的数字。也许问题应该是我还能使用什么来代替 ng-max 来验证该值是否针对基数。

示例插件

http://plnkr.co/edit/9SAgqkjOlqUEHXhcyaqB?p=preview

【问题讨论】：

【解决方案1】：

尝试将输入类型更改为number 而不是text。

【讨论】：

【解决方案2】：

max 和 min 属性适用于以下输入类型：number、range、date、datetime、datetime-local、month、time 和 week。

<input name="mainInput" type="number" size="10" ng-model="data.baseNumber" ng-max="3" required/>

要查看样式更改，请添加 CSS 规则

.ng-invalid{
  border: 1px solid red;
}

【讨论】：

【解决方案3】：

您的程序也有一个错误。 TypeError：无法读取未定义的属性“$valid”

匹配表单的名称，你确实错配为numberForm、modalForm

也将字段设为 number 作为 type

【讨论】：

【解决方案4】：

应该是

<input name="modalInput" type="number" class="form-control" size="10" ng-model="data.myNumber" required max="data.baseNumber" />

如果你想保持 type="text" 我认为你不能使用 ng-max 来验证文本类型。因此，您可以为输入 ng-change="change()"

创建一个事件

<input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required ng-change="change()"  />

change() 函数在用户输入时为您检查最大值

$scope.change = function(value) {
    if (value> maxValue){// Do something here}
  };

【讨论】：