ngModelがngBlurの後に更新されました

Question

私はui-bootstrapのdatepicker入力をAngularJSで使用しています。これはngModelとngBlurイベントに結合validatioon方法があります

<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はまだ更新されていません。したがって、検証によって今日の価値がチェックされ、okと表示されます。実際には、ngModelの値を31.12.1999にチェックしてください。値は入力ビューで同時に変更されますが、背景では、ぼかしメソッドが起動された後に設定されます。私の知る限り、AngularJSの双方向バインディングは通常この目的のために機能しますが、ngBlurは例外でなければなりません。

私は多くのことを試しました。

• 成分にNG-モデルオプションの追加：

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

• が前後リンクを使用NG変化代わりNG-ボケを使用して入力要素

• を変更することによって

しかし、上記のいずれも動作せず、ng-blurはまだ実行されていません。モデルが更新されます。

Answer 1

コントローラ内の値を手動で更新して解決策を見つけました。明らかに、AngularJSは、blurイベントが発生するまで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の値を検証できます！

Answer 2

値が更新された後で検証が有効になることを確認する簡単な方法は、ng-blurではなく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