Updating the model after focus is lost in input control

Question

In this code:

<input class="form-control" ng-model="actionText" /> 

AngularJS will update the actionText model when the user enters the material. If this model is used in another place, for example, in the controller, it is updated as each character is entered. I can think of situations where it can be bad. Perhaps you only need the model value AFTER the user has moved the focus from the input to something else, for example, when you need to check the input when it was completed. I could use the Javascript blur function to tweak the handler to determine when the focus is lost, but this is similar to what Angular should look like. Is there an AngularJS way to update the model after the input has lost focus?

Answer 1

For this you can use the ngModelOptions directive. With ngModelOptions you can clarify how the ngModel directive ngModel . To achieve what you requested, you can use it as follows:

 <input class="form-control" ng-model="actionText" ng-model-options="{ updateOn: 'blur'}"/> 

You can find more information and a working example in the angular documentation: https://docs.angularjs.org/api/ng/directive/ngModelOptions

Answer 2

I think the easiest way is to simply use ng-blur to bring down something that you want to do.

http://plnkr.co/edit/rhcliQRzUOBKQ3xKFrde?p=preview

 app.controller('MainCtrl', function($scope) { $scope.myDataBlurred = $scope.myData; $scope.blurred = function() { $scope.myDataBlurred = $scope.myData; } }); <input ng-model='myData' ng-blur='blurred()' /> <div> This will update as you type: {{myData}} </div> <div> This will update after you blur: {{myDataBlurred}} </div>