ngModel обновлен после ngBlur

Question

Я использую входной сигнал yi-bootstrap datepicker с помощью AngularJS. Он имеет ngModel и метод validatioon связанный с ngBlur события:

<input id="startDate" type="text" ng-model="myCtrl.startDate" ng-blur="myCtrl.validateDate()"/> 

Метод проверки провер ет ngModel в соответствии с набором правил в контроллере, и предупреждает, если это необходимо. Вот соответствующая часть контроллера:

var vm = this; 
vm.startDate = new Date(); 
vm.minStartDate = new Date(2000,1,1); 
vm.validateDate = function(){ 
    if(vm.startDate < vm.minStartDate) 
     alert("Start date can't be earliar than 2000"); 
} 

Проблема заключается в том, что метод проверки выполняется перед обновлением модели. Пример сценария выглядит следующим образом:

Правило: startDate не может быть раньше года . Когда страница загружается, значение startDate изначально установлено на сегодняшний день. Пользователь выбирает 31.12.1999 из календаря, вызывается метод ngBlur. Однако ngModel еще не обновлен. Таким образом, проверка проверяет сегодняшнее значение и говорит «ОК». Фактически, он должен был проверить значение ngModel с 31.12.1999. Значение изменяется одновременно на входе, но в фоновом режиме оно устанавливается после запуска метода размытия. Насколько мне известно, двусторонняя привязка в AngularJS обычно служит для этой цели, но ngBlur должен быть исключением.

Я пробовал много вещей, таких как;

• Добавление нг-модели-варианты компонента:

  ng-model-options="{ updateOn: 'blur' }"

• Используя до и после связывания путем изменения входного элемента

• Использование нг-изменение вместо нг-размытия

Однако ни одно из вышеперечисленных работ не работает, и все еще ng-blur работает до обновлена ​​модель.

Answer 1

Я нашел решение, вручную обновив значения внутри контроллера. Очевидно, что AngularJS не будет обновлять модель со значением внутри элемента HMTL до тех пор, пока не будет запущено событие размытия. Поэтому лучше написать метод для его обновления.

я могу получить доступ к значению внутри элемента следующим образом:

vm.startDate = angular.element('#startDate').val(); 

Тогда я могу обернуть это с помощью метода:

vm.updateModels() = function(){ 
    vm.startDate = angular.element('#startDate').val(); 
} 

Наконец, я просто называю это в самом первом моем blur event:

vm.validateDate = function(){ 
    //Update first 
    vm.updateModels(); 
    //Then validate 
    if(vm.startDate < vm.minStartDate) 
     alert("Start date can't be earliar than 2000"); 
} 

Ta tammm, теперь я могу проверить значения updatet!

Answer 2

Простой способ убедиться в том, что проверка подлинности срабатывает только после обновления значения, это вызвать его вместо ng-размытия ng-change. Таким образом, вы уверены, что контроллер оценивает только после обновления значения ng-model.

Answer 3

Попробуйте построить собственную пользовательскую валидатор (директива)

app.directive('integer', function() { 
    return { 
    require: 'ngModel', 
    link: function(scope, elm, attrs, ctrl) { 
     ctrl.$validators.integer = function(modelValue, viewValue) { 
     if (ctrl.$isEmpty(modelValue)) { 
      // consider empty models to be valid 
      return true; 
     } 

     if (INTEGER_REGEXP.test(viewValue)) { 
      // it is valid 
      return true; 
     } 

     // it is invalid 
     return false; 
     }; 
    } 
    }; 
}); 

Проверить этот пример https://plnkr.co/edit/SZoBKakhzIq5wRoCvEyG?p=preview