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

Question

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

Это в основном выглядит следующим образом:

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

Любые идеи?

Answer 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

Answer 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; 
} 

Answer 3

Угловая 1,3 представил реальный ответ на это: allowInvalid в ngModelOptions.

Пример:

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