Please provide option for binding ng-model for input onblur #1285

cstrong · 2012-08-22T15:54:10Z

There are certain situations where ng-model binding with onblur semantics is desirable.
For example, when input fields are used to enter dates or currency amounts.
In those cases, it is important to allow the user to finish typing the complete value before acting on it.
Of course, I can attach a custom onblur event using jQuery, but it seems reasonable to have a built-in angular API to handle this very common use case.

jonbcard · 2012-09-27T17:34:30Z

Having more control over the event bindings ng-model fires on can also be important for performance considerations. There are a lot of cases where I'd be happy to delay $setViewValue being called until onblur to avoid sluggishness while typing.

pkozlowski-opensource · 2012-11-14T22:24:31Z

Duplicate of #1277

sinelaw · 2013-03-07T16:21:41Z

I'm not sure this is a duplicate of #1277 - this issue is about the way ngModel behaves, not about missing directives for blur/focus.

Here's what I'm using in the meanwhile. It's based on an answer by Vojta Jína - http://jsfiddle.net/JYTUB/1/ from https://groups.google.com/forum/?fromgroups=#!topic/angular/LH0Q1A-qTVo)

It overrides the default ngModel behavior, and forces it to $setViewValue on 'blur':

    angular.module('directives', []).directive('input', function () {
        return {
            restrict: 'E',
            require: '?ngModel',
            link: function (scope, elm, attr, ngModelCtrl) {
                if (!ngModelCtrl) {
                    return;
                }

                if (attr.type === 'radio' || attr.type === 'checkbox') {
                    return;
                }

                elm.unbind('input').unbind('keydown').unbind('change');
                elm.bind('blur', function () {
                    scope.$apply(function () {
                        ngModelCtrl.$setViewValue(elm.val());
                    });
                });
            }
        };
    });

lrlopez · 2013-03-08T19:36:47Z

Hmmm... I think that allowing an override in ng-model for the bound events is a very interesting feature. Also, it's easy to implement.

Have a look into this: http://plnkr.co/edit/DNCcAT9qrYIt4Kk9zSTp?p=preview

There is a new attribute called ng-event that allows override the event the input is bound to. In the example, I've used the blur event so it only updates the model when the focus is lost.

Do you like this approximation? I can write down some tests and docs and prepare a PR.

Maybe we should also allow a comma-delimited list of events instead of just a single event.

lrlopez · 2013-03-08T23:40:29Z

I've coded some tests and docs. Also, now it allows a comma-delimited list of events and overriding the default behavior is optional.

Some examples:

<input ng-model='name' ng-update-model-on='blur, mousemove' />: Model will get updated on blur and when the mouse moves over the control.
<input ng-model='name' ng-update-model-on='submit, default' />: Model will get updated instantly (default behavior) on blur and also when the control is submitted.

I didn't like ng-event. As we specify that we want update the model on blur or on mousedown, I switched over ng-update-model-on which is closer to its meaning. Is it too long?

Anyway I'm going to commit the changes send the PR right now.

florianorben · 2013-03-09T00:47:25Z

+1 nice feature.

Proposal for an similar/additional feature - in your code you have this:

if (!timeout) {
       timeout = $browser.defer(function() {
       listener();
       timeout = null;
   });
}

I think I would be nice to do something like ng-model-update-on="timout:100" (just an example), so that the model get's updated when the viewValue hasn't been changed for 100ms.
Could be useful for scenarios where you have to enter long texts (e.g. in a textarea) and don't need the model to be updated on each individual keystroke.

Integrating this in the code cited above, should be quite easy i guess..

What's your opinion about this?

lrlopez · 2013-03-09T01:10:33Z

It's a cool idea, but I think it would be better to implement a ng-model-update-timeout attribute instead because it will get applied to any event on the list (i.e. update 100ms after blur or keydown).

To be useful we should have a way to restart the timer every time a event gets triggered. Following your example, the model will get updated only when you have really finished typing instead of periodically getting updated very 100ms.

Any additional ideas? I could try to get it done soon. Thank you Florian!

florianorben · 2013-03-09T01:43:54Z

Agree, ng-model-update-timeout makes way more sense.
The example provided wasn't meant to really describe the "problem", it's basically just what triggered the idea. The way it should be done, as you said, is to trigger the update X ms after the last specified (or default) event was triggered.
To restart the timer we could use $browser.defer.cancel(timeoutId) and afterwards "restart" it with $browser.defer(fn) again, though this seems to be a lot of overhead for potentially quite a lot of timeouts being cancelled.

lrlopez · 2013-03-09T12:06:30Z

Done. I've extended the ng-model-update-on feature to checkboxes and radio buttons and implemented a ng-model-update-timeout on both text and checkbox inputs.

Also, I've updated the Plunker demo, documentation and tests.

florianorben · 2013-03-09T12:27:41Z

Very cool! Great work Luis! + looks fine ;)

sinelaw · 2013-03-12T01:38:17Z

Perhaps this issue should be reopened?

Charuru · 2013-05-26T03:23:19Z

+1 for reopen.

By default, any change on the content will trigger an immediate model update and form validation. Now you can override this behavior using the `ng-update-model-on` attribute to bind only to a comma-delimited list of events. I.e. `ng-update-model-on="blur"` will update and validate only after the control loses focus. If you want to keep the default behavior and just add new events that may trigger the model update and validation, add `default` as one of the specified events. I.e. `ng-update-model-on="default,mousedown"` Also, a `ng-update-model-debounce` attribute will allow defering the actual model update some time after the last trigger event takes place (debouncing). This feature is not available in radio buttons. I.e. `ng-update-model-debounce="500"` Custom debouncing timeouts can be set for each event if you use an object in `ng-update-model-on`. I.e. `ng-update-model-on="{default: 500, blur: 0}"` You can specify both attributes in any tag so they became the default settings for any child control, although they can be overriden. Closes angular#1285

By default, any change on the content will trigger an immediate model update and form validation. This PR implements a new directive `ng-model-options` that allow you to override this default behavior in several ways. You should specify an object with the different parameters. For example, it allows to trigger an update only when a particular event or list of events is received by the input using the `updateOn` key. Should you need multiple events, just assign an array to it. I.e. `ng-model-options="{ updateOn: 'blur' }"` will update and validate only after the control loses focus. If you want to keep the default behavior and just add new events that may trigger the model update and validation, add "default" as one of the specified events. I.e. `ng-model-options="{ updateOn: ['default','submit'] }"` Also, with the `debounce` option, `ng-model-options` will allow defering the actual model update until a timer expires. The timer will be reset each time an event is triggered. I.e. `ng-model-options="{ debounce: 500 }" for 500ms after the latest event. Custom timeouts for each event can be set for each event if you use an object in `debounce`. This can be useful to force immediate updates on some specific circunstances (like blur events). I.e. `ng-model-options="{ updateOn: ['default', 'blur'], debounce: { default: 500, blur: 0} }"` You can use the directive in any tag so its contents became the default settings for any child control, although they can be overriden. Closes angular#1285, angular#2129

By default, any change on the content will trigger an immediate model update and form validation. This PR implements a new directive `ng-model-options` that allow you to override this default behavior in several ways. You should specify an object with the different parameters. For example, it allows to trigger an update only when a particular event or list of events is received by the input using the `updateOn` key. Should you need multiple events, just assign an array to it. I.e. `ng-model-options="{ updateOn: 'blur' }"` will update and validate only after the control loses focus. If you want to keep the default behavior and just add new events that may trigger the model update and validation, add "default" as one of the specified events. I.e. `ng-model-options="{ updateOn: ['default','submit'] }"` Also, with the `debounce` option, `ng-model-options` will allow defering the actual model update until a timer expires. The timer will be reset each time an event is triggered. I.e. `ng-model-options="{ debounce: 500 }" for 500ms after the latest event. Custom timeouts for each event can be set for each event if you use an object in `debounce`. This can be useful to force immediate updates on some specific circumstances (like blur events). I.e. `ng-model-options="{ updateOn: ['default', 'blur'], debounce: { default: 500, blur: 0} }"` You can use the directive in any tag so its contents became the default settings for any child control, although they can be overriden. Closes angular#1285, angular#2129

By default, any change on the content will trigger an immediate model update and form validation. This PR implements a new directive `ng-model-options` that allow you to override this default behavior in several ways. You should specify an object with the different parameters. For example, it allows to trigger an update only when a particular event or list of events is received by the input using the `updateOn` key. Should you need multiple events, just assign an array to it. I.e. `ng-model-options="{ updateOn: 'blur' }"` will update and validate only after the control loses focus. If you want to keep the default behavior and just add new events that may trigger the model update and validation, add "default" as one of the specified events. I.e. `ng-model-options="{ updateOn: ['default','submit'] }"` Also, with the `debounce` option, `ng-model-options` will allow deferring the actual model update until a timer expires. The timer will be reset each time an event is triggered. I.e. `ng-model-options="{ debounce: 500 }" for 500ms after the latest event. Custom timeouts for each event can be set for each event if you use an object in `debounce`. This can be useful to force immediate updates on some specific circumstances (like blur events). I.e. `ng-model-options="{ updateOn: ['default', 'blur'], debounce: { default: 500, blur: 0} }"` You can use the directive in any tag so its contents became the default settings for any child control, although they can be overridden. Closes angular#1285, angular#2129

By default, any change to the content will trigger an immediate model update and form validation. This PR implements a new directive `ng-model-options` that allow you to override this default behavior in several ways. You should specify an object with the different parameters. For example, it allows to trigger an update only when a particular event or list of events is received by the input using the `updateOn` key. Should you need multiple events, just assign an array to it. I.e. `ng-model-options="{ updateOn: 'blur' }"` will update and validate only after the control loses focus. If you want to keep the default behavior and just add new events that may trigger the model update and validation, add "default" as one of the specified events. I.e. `ng-model-options="{ updateOn: ['default','submit'] }"` Also, with the `debounce` option, `ng-model-options` will allow deferring the actual model update until a timer expires. The timer will be reset each time an event is triggered. I.e. `ng-model-options="{ debounce: 500 }" for 500ms after the latest event. Custom timeouts for each event can be set for each event if you use an object in `debounce`. This can be useful to force immediate updates on some specific circumstances (like blur events). I.e. `ng-model-options="{ updateOn: ['default', 'blur'], debounce: { default: 500, blur: 0} }"` You can use the directive in any tag so its contents became the default settings for any child control, although they can be overridden. Closes angular#1285, angular#2129

@lrlopez

By default, any change to an input will trigger an immediate model update, form validation and run a $digest. This is not always desirable, especially when you have a large number of bindings to update. This PR implements a new directive `ngModelOptions`, which allow you to override this default behavior in several ways. It is implemented as an attribute, to which you pass an Angular expression, which evaluates to an **options** object. All inputs, using ngModel, will search for this directive in their ancestors and use it if found. This makes it easy to provide options for a whole form or even the whole page, as well as specifying exceptions for individual inputs. * You can specify what events trigger an update to the model by providing an `updateOn` property on the **options** object. This property takes a string containing a space separated list of events. For example, `ng-model-options="{ updateOn: 'blur' }"` will update the model only after the input loses focus. There is a special pseudo-event, called "default", which maps to the default event used by the input box normally. This is useful if you want to keep the default behavior and just add new events. * You can specify a debounce delay, how long to wait after the last triggering event before updating the model, by providing a `debounce` property on the **options** object. This property can be a simple number, the debounce delay for all events. For example, `ng-model-options="{ debounce: 500 }" will ensure the model is updated only when there has been a period 500ms since the last triggering event. The property can also be an object, where the keys map to events and the values are a corresponding debounce delay for that event. This can be useful to force immediate updates on some specific circumstances (like blur events). For example, `ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0} }"` This commit also brings to an end one of the longest running Pull Requests in the history of AngularJS (#2129)! A testament to the patience of @lrlopez. Closes #1285, #2129, #6945

rasikanab · 2014-10-09T01:27:35Z

hi, can this kind of behaviour be used in case of radio buttons? I want to validate when the the user has moved out of all the radio button options. I cant use blur as blur will validate when the user tabs from one option to another, even before the user gets an opportunity to select an option.

pkozlowski-opensource closed this as completed Nov 14, 2012

lrlopez mentioned this issue Mar 8, 2013

feat(input): Allow custom events and timeouts to trigger model updates #2129

Closed

lrlopez mentioned this issue Apr 1, 2014

feat(ngModelOptions): Model update behavior can now be customized #6945

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Please provide option for binding ng-model for input onblur #1285

Please provide option for binding ng-model for input onblur #1285

cstrong commented Aug 22, 2012

jonbcard commented Sep 27, 2012

pkozlowski-opensource commented Nov 14, 2012

sinelaw commented Mar 7, 2013

lrlopez commented Mar 8, 2013

lrlopez commented Mar 8, 2013

florianorben commented Mar 9, 2013

lrlopez commented Mar 9, 2013

florianorben commented Mar 9, 2013

lrlopez commented Mar 9, 2013

florianorben commented Mar 9, 2013

sinelaw commented Mar 12, 2013

Charuru commented May 26, 2013

rasikanab commented Oct 9, 2014

Please provide option for binding ng-model for input onblur #1285

Please provide option for binding ng-model for input onblur #1285

Comments

cstrong commented Aug 22, 2012

jonbcard commented Sep 27, 2012

pkozlowski-opensource commented Nov 14, 2012

sinelaw commented Mar 7, 2013

lrlopez commented Mar 8, 2013

lrlopez commented Mar 8, 2013

florianorben commented Mar 9, 2013

lrlopez commented Mar 9, 2013

florianorben commented Mar 9, 2013

lrlopez commented Mar 9, 2013

florianorben commented Mar 9, 2013

sinelaw commented Mar 12, 2013

Charuru commented May 26, 2013

rasikanab commented Oct 9, 2014