无论使用输入类型 =“数字”进行验证，都保留输入值答案

【问题标题】：Preserving input value regardless of validation with input type="number"无论使用输入类型 =“数字”进行验证，都保留输入值
【发布时间】：2014-07-18 18:34:11
【问题描述】：

我在使用 angularJs 和 input type="number" 时遇到了奇怪的情况。基本上，如果我输入的类型号和初始值超出了最小值和最大值定义的范围，我的初始值就会被破坏。

我用小提琴来说明问题 - 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
    };
}

如您所见，第一个文本框可以正常工作，但第二个文本框根本不显示该值。我肯定需要保留价值，同时还要在一定范围内将其验证为数字 - 那么我们有什么办法吗？

【问题讨论】：

为什么会令人惊讶？当它按预期工作时，为什么还要称它为错误？
是的，我同意@mplungjan。看来您希望的行为会发生。
好吧，文档 (docs.angularjs.org/api/ng/input/input%5Bnumber%5D) 说它会引发验证错误——因此可以选择使用 novalidate 选项 (docs.angularjs.org/guide/forms) 禁用验证。我假设你想要验证，但在任何其他情况下......
请不要进入语义，我将编辑问题以删除单词“bug”。但我希望每个人都明白，如果它是有效的数字，我希望价值被保留，而不是被破坏。
所以基本上你不想验证范围，对吧？那你为什么要使用min 和max 属性呢？

标签： javascript angularjs

【解决方案1】：

我同意这是一个错误。

这是因为格式化程序先于验证程序应用。 'number' 情况下的格式化程序

  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);**
  }

在验证器最初运行之前首先运行所有 $formatters...检查 NgModelController。

我想知道 $dirty != true 的“第一次”时间是否基于有效性应用格式化程序，即如果验证结果为假，则让格式化程序产生。

在 minNumber 的情况下，格式化程序应该只是一个数字。为什么我们需要 minNumber 的格式化程序？

提出https://github.com/angular/angular.js/issues/8264

在 Angular 团队修复之前，这个短期解决方案将是使用您自己的指令而不是 min。

【讨论】：

感谢您抽出宝贵时间提出问题并做出回应。在 Angular 团队解决此问题之前，我将按原样接受答案。
还要注意 type=number 的另一个问题 - 如果你有一个 <input type="number"/> 并且模型的初始值是 NaN （比如字符串）你会看到相同的“丢失”行为你提到的。 Angular 团队正致力于解耦验证器、格式化程序和解析器。

【解决方案2】：

恕我直言，这是一个错误。

如果你删除 ng-model 属性，你会看到初始值。

如果这不是错误，当我们输入无效值（例如 40）时，我们不能看到输入的文本，因为它发生在初始化时。看，它并不一致。

只有第一次初始化输入指令时才会发生。

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

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

【讨论】：