从无效输入字段中获取“原始”值答案

【问题标题】：Get "raw" value from invalid input field从无效输入字段中获取“原始”值
【发布时间】：2013-11-06 16:37:32
【问题描述】：

我的表单中有一个输入字段，并进行了一些验证。它就像一个魅力。

基本上是这样的：

<input
  class="form-control"
  type="number"
  ng-model="zipcode"
  ng-minlength="5"
  ng-maxlength="5"
  id="zipcode"
  name="zipcode"
  required
>

一个工作的 plunkr 在这里：http://plnkr.co/edit/H0h59kG75T5MGE9cAhSo?p=preview

但现在我也想对每个输入更改做出反应——无论是否有效。因此，例如，如果输入字段包含“123”，则它无效并且该值不会传输到我的模型 - 没关系。但我仍然希望获得对 Web 服务执行一些中间请求的价值。

有什么想法吗？

【问题讨论】：

我认为您必须在控制器中处理最小值和最大值才能使其正常工作。

标签： angularjs

【解决方案1】：

首先在控制器中调用表单元素，然后使用$viewValue 属性：

查看：

<form name="form">
<input
  ...
  ng-model="zipcode"
  ng-change="getRawValue(form)"
  name="zipcode"
  required
>
</form>

控制器：

$scope.getRawValue = function(form) {
  var rawValue = form.zipcode.$viewValue;
}

【讨论】：

这应该是 IMO 的正确答案。它更简单，不需要指令。
杰，谢谢！只需要“form.zipcode.$viewValue” .. 简单的解决方案！
据我了解，$viewValue 与通过解析器运行的值不同，但尚未被视为有效并提交给模型。因此，虽然它们通常具有相同的值，但并非总是如此。

【解决方案2】：

Angular 1.3 为此引入了一个真正的答案：allowInvalid in ngModelOptions。

例子：

<input 
    type="text"
    name="userName"
    ng-model="user.name"
    ng-model-options="{allowInvalid: true}"
>

【讨论】：

IMO，这是处理无效值的最干净的方法。这不需要指令，甚至不需要使用它的特殊函数。只要把它放进去，它就可以工作了。
我一直在寻找这个答案。我只是对找到它的难度感到震惊。谢谢！

【解决方案3】：

这是我为您的方案想出的。

基本上你可以编写一个需要ngModel (ngModelController) 的指令。 ngModelController 有一个解析器数组，它调用这些解析器以管道方式解析视图值。如果验证失败，这些解析器不会更新模型。如果您在此解析器数组的开头注入自定义解析器，您可以获得每个视图更改值并使用它做任何您想做的事情。

在这里查看我的 plunkr http://plnkr.co/edit/ruB42xHWj7dBxe885OGy?p=preview（见控制台）

基本代码是

ngModelCtrl.$parsers.splice(0,0,(function (viewValue) {
              console.log("The view value is:"+viewValue)
                return viewValue;           
            }));

另见ngModelController documenation

【讨论】：

非常感谢您特别快速的答复。另外：像魅力一样工作；）
再次感谢。 IMO 你的回答非常值得一篇博文，所以这里是：wasis.nu/mit/blog?postId=527aafe9975ab23791ba6da8
太棒了！我也是这么想的。我看了你的帖子，你改进了这个实现。