无论验证结果如何，保留输入值的方法（input type="number"）

Question

在使用angularJs和input type="number"时，我遇到了一个奇怪的问题。基本上，如果我的输入类型为数字，并且初始值超出了由最小值和最大值定义的范围，那么我的初始值将被简单地销毁。

我制作了一个演示该问题的fiddle - http://jsfiddle.net/PK3QH/2/

HTML:

<div ng-controller="MyCtrl">
    <input ng-model="bindData.SomeAmount" type="number" required="required" />
    <br />
    <input ng-model="bindData.SomeAmount" type="number" required="required" 
        min="2" max="10" />
</div>

Javascript:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.bindData = {
        SomeAmount: 1
    };
}

如您所见，第一个文本框可以正常工作，但是第二个文本框根本没有显示值。我肯定需要保留该值，并在一定范围内验证其为数字 - 那么有没有什么方法可以解决这个问题呢？

- nikib3ro

---

为什么会让人感到惊讶？当预期功能正常工作时，为什么还称其为错误（bug）？ - mplungjan

是的，我同意 @mplungjan 的观点。看起来这确实是你想要发生的行为。 - Code Maverick

好的，文档（https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D）中指出它会引发验证错误--因此一个选项是使用`novalidate`选项禁用验证（https://docs.angularjs.org/guide/forms）。但我认为在其他情况下您可能仍需要验证... - Casey Falk

请不要纠缠于语义学问题，我会编辑问题以删除“bug”一词。但是我希望每个人都明白，如果值是有效的数字，我希望它被保留而不是被破坏。 - nikib3ro

所以基本上你不想验证范围，对吧？那你为什么还要使用 min 和 max 属性呢？ - Blackhole

Answer 1

我同意这是一个错误。

造成这个问题的原因是在验证器之前先应用了格式化程序。在“数字”这种情况下，格式化程序会起作用。

  if (attr.min) {
    var minValidator = function(value) {
      var min = parseFloat(attr.min);
      return validate(ctrl, 'min', ctrl.$isEmpty(value) || value >= min, value);
    };

    ctrl.$parsers.push(minValidator);
    **ctrl.$formatters.push(minValidator);**
  }

在验证器最初运行之前，首先运行所有的$formatter...请查看NgModelController。

我想知道如果第一次$dirty != true时是否基于有效性应用格式化程序，即使验证结果为false也允许格式化程序产生作用。

对于minNumber来说，格式化程序应该只是一个数字。为什么我们需要为minNumber使用格式化程序？

已经提出了问题：https://github.com/angular/angular.js/issues/8264

在Angular团队解决这个问题之前，短期解决方案是使用自己的指令代替min。

- bhantol

---

感谢您抽出时间提出问题并回复。在Angular团队解决此问题之前，我将接受现有的答案。 - nikib3ro

还要注意另一个与type=number有关的问题——如果您有一个<input type="number"/>，并且模型中的初始值为NaN（例如字符串），您将看到与您提到的相同的“丢失”行为。Angular团队正在努力解耦验证器、格式化程序和解析器。 - bhantol

Answer 2

在我看来，这是一个错误。

如果您移除ng-model属性，您将看到初始值。

如果这不是一个错误，当我们输入无效值（如40）时，我们不应该像初始化时那样看到输入的文本。看，这是不一致的。

只有在输入指令初始化时才会发生这种情况。

在我看来，即使模型值不是值，它也应该通过不设置为空来保留原始值。

很抱歉没有提供解决方案。

- allenhwkim