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

时间:2013-11-06 16:37:32

标签: angularjs

我在一个带有一些验证的表单中有一个输入字段。它就像一个魅力。

它基本上是这样的:

<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服务进行一些中间请求的价值。

任何想法?

3 个答案:

答案 0 :(得分:13)

首先调用控制器中的表单元素,然后使用$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;
}

答案 1 :(得分:12)

Angular 1.3为此提出了真正的答案:ngModelOptions中的allowInvalid

示例:

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

答案 2 :(得分:6)

以下是我为您的方案提出的建议。

基本上你可以编写一个需要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