How to let ng-model not update immediately?

Question

Code:

<input type="text" ng-modal="name" />
{{name}}

When I input something into the input, the following {{name}} will change immediately. Is it able to configure it only update the name after I input all characters and leave the input?

possible duplicate of [Angularjs: input\[text\] ngChange fires while the value is changing](http://stackoverflow.com/questions/11868393/angularjs-inputtext-ngchange-fires-while-the-value-is-changing) — Mark Rajcok, Feb 06 '13 at 15:18

manikanta · Answer 1 · 2014-04-13T17:00:54.840

53

This is about recent additions to AngularJS, to serve as future answer.

Angular newer versions (now in 1.3 beta), AngularJS natively supports this option, using ngModelOptions, like

ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"

NgModelOptions docs

Example:

<input type="text" name="username"
       ng-model="user.name"
       ng-model-options="{updateOn: 'default blur', debounce: {default: 500, blur: 0} }" />

edited Apr 13 '14 at 17:00

answered Apr 13 '14 at 16:55

manikanta

8,100
5
59
66

It doesn't work correct in 1.3 beta 5, but fixed in current master build 2602 – manikanta Apr 15 '14 at 07:03
2

any options using 1.2 version? coz the fiddle people post about overriding input element doesn't work anymore. – mayankcpdixit May 10 '14 at 17:39
works properly with the current beta version ( 1.3.0-beta-13 ) – epeleg Jun 25 '14 at 09:30
Note: The 'default' and 'blur' are 2 separate options. Specifying them both leaves it as 'default', not 'blur' (v1.3) – Overflew Mar 05 '15 at 22:36
That's because I love angular :D – Daniel Campos Sep 28 '16 at 03:00

score 22 · Accepted Answer · edited May 23 '17 at 12:25

22

Update

As many have mentioned Angular now has built-in support for this using the ng-model-options directive. See more here.

<input type="text" ng-model="name" ng-model-options="{updateOn: 'blur'}" />

Old answer below:

There's no built-in option for ng-model to change that behaviour, but you can write a custom directive doing it. @Gloopy wrote a directive like that for another question. You can look at the fiddle here.

The directive unregisters from the input and keydown events which trigger the update after each keystroke.

<input type="text" ng-model="name" ng-model-onblur />

Update:

Updated fiddle to use latest stable AngularJS (1.2.16 as of writing), instead of directly referencing the master version at github.

Also added an explicit priority so that the directive is run after ng-model to ensure event listeners are changed correctly.

edited May 23 '17 at 12:25

Community

1
1

answered Feb 06 '13 at 06:29

Martin

8,876
2
35
36

5

The fiddle is not working as expected. It updates as you type – Cihad Turhan Apr 18 '14 at 07:27
Note: Angular has built in support for this now. https://docs.angularjs.org/api/ng/directive/ngModelOptions – Douglas Gaskell Feb 21 '16 at 04:20
If there's a way to change the accepted answer to @manikanta it'll be great. – KhoPhi Jun 16 '16 at 12:21

score 9 · Answer 3 · answered Jul 07 '14 at 11:47

9

A better option is to use the ng-model-options:

<input type="text" ng-model="name" ng-model-options="{updateOn: 'blur'}" />

answered Jul 07 '14 at 11:47

Niels Steenbeek

4,692
2
41
50

this, however, being the 'right' way only works in newer versions of angular that no longer support ie8... kind of a killer in a lot of dev env :/ – O'Mutt Nov 13 '14 at 14:12
6

You should simply kill IE8. Google dropped support in 2012. – s.Daniel Dec 09 '14 at 08:48
I have the same problem with two fields (user and password) in a form, I want to update when click on login button not on blur or typing characters, my problems is that each time that ng-model update the iphone scroll the page to the top – xzegga Oct 20 '15 at 01:43
@s.Daniel +1. If the world keeps supporting IEs from the past, the world might end up using W95 – KhoPhi Jun 16 '16 at 12:20

score 5 · Answer 4 · answered May 10 '14 at 17:49

Working directive code(ng-1.2RC3): use: ng-model-onblur

.directive('ngModelOnblur', function () {
  return {
      restrict: 'A',
      require: 'ngModel',
      priority: 1,
      link: function (scope, element, attrs, ngModelCtrl) {
          if (attrs.type === 'radio' || attrs.type === 'checkbox') { return; }
          var update = function () {
              scope.$apply(function () {
                  ngModelCtrl.$setViewValue(element.val().trim());
                  ngModelCtrl.$render();
              });
          };
          element.off('input').off('keydown').off('change').on('focus', function () {
              scope.$apply(function () {
                  ngModelCtrl.$setPristine();
              });
          }).on('blur', update).on('keydown', function (e) {
              if (e.keyCode === 13) {
                  update();
              }
          });
      }
  };
})

How to let ng-model not update immediately?

4 Answers4

Linked