Получить "сырое" значение из недопустимого поля ввода

У меня есть поле ввода в форме с некоторыми валидациями. Он работает как шарм.

В основном это выглядит так:

<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", оно недействительно и значение не передается моей модели - это прекрасно. Но я все же хочу получить значение для выполнения промежуточных запросов к веб-сервису.

Любые идеи?

Ответы

Ответ 1

Вот что я придумал для вашего сценария.

В принципе вы можете написать директиву, которая требует 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

Ответ 2

Сначала вызовите элемент формы в вашем контроллере, затем используйте атрибут $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;
}

Ответ 3

Angular 1.3 представил реальный ответ для этого: allowInvalid в ngModelOptions.

Пример:

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