ngBlur後更新ngModel

我在AngularJS中使用ui-bootstrap的datepicker輸入。它的ngModel和結合到ngBlur事件validatioon方法：ngBlur後更新ngModel

<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尚未更新。因此，驗證檢查今天的價值，並說好。實際上，它應該用31.12.1999檢查ngModel的值。該值在輸入視圖上同時發生變化，但在背景中，它會在啓動模糊方法後設置。據我所知，AngularJS中的雙向綁定通常用於此目的，但ngBlur必須是一個例外。

我已經嘗試了很多東西，如;通過修改輸入元件

使用納克變代替NG-模糊

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

使用前，後的連接：

添加NG-模型的選項的部件

但是，以上都沒有工作，仍然ng模糊之前運行模型已更新。

來源

2016-05-04 Faruk Yazıcı

我已經通過手動更新控制器內的值找到了解決方案。顯然AngularJS不會用HMTL元素中的值更新模型，直到模糊事件被觸發。所以，最好寫一個方法來更新它。

我可以在元素中訪問值如下：

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

然後，我可以用一個方法把這個包：

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

最後，我只是在第一個調用這個我模糊事件：

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值了！

來源

2016-05-04 15:00:54

確保只有在更新值時觸發驗證的一種簡單方法是將其稱爲ng變更而不是ng-blur。這樣你就可以確定控制器只在ng-model值更新後才進行評估。

來源

2016-05-04 15:12:27

試圖建立你自己的自定義驗證程序（指令）

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

來源

2016-05-04 15:16:25

ngBlur後更新ngModel

回答

相關問題