This repository has been archived by the owner on Apr 12, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 27.5k
feat(ngModelOptions): Model update behavior can now be customized #6945
Closed
Closed
Changes from all commits
Commits
Show all changes
4 commits
Select commit
Hold shift + click to select a range
c704f76
WIP: initial spike at debouncing inside NgModelController
petebacondarwin c93c454
feat(ngModelOptions): Model update behavior can now be customized
lrlopez a633144
WIP: Changes requested by Igor
lrlopez 70b8f40
WIP: Changes requested by Pete
lrlopez File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -181,6 +181,82 @@ This allows us to extend the above example with these features: | |
|
||
|
||
|
||
# Custom triggers | ||
|
||
By default, any change to the content will trigger a model update and form validation. You can | ||
override this behavior using the {@link ng.directive:ngModelOptions ngModelOptions} directive to | ||
bind only to specified list of events. I.e. `ng-model-options="{ updateOn: "blur" }"` will update | ||
and validate only after the control loses focus. You can set several events using a space delimited | ||
list. I.e. `ng-model-options="{ updateOn: 'mousedown blur' }"` | ||
|
||
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 blur' }"` | ||
|
||
The following example shows how to override immediate updates. Changes on the inputs within the form will update the model | ||
only when the control loses focus (blur event). | ||
|
||
<example> | ||
<file name="index.html"> | ||
<div ng-controller="ControllerUpdateOn"> | ||
<form> | ||
Name: | ||
<input type="text" ng-model="user.name" ng-model-options="{ updateOn: "blur" }" /><br /> | ||
Other data: | ||
<input type="text" ng-model="user.data" /><br /> | ||
</form> | ||
<pre>username = "{{user.name}}"</pre> | ||
</div> | ||
</file> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is there a need for the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sorry about that. I was so desperate about the protractor tests not working that I copied&pasted a working one and forgot to remove them. Fixing now. Edit: Fixed also the other example in the docs |
||
<file name="script.js"> | ||
function ControllerUpdateOn($scope) { | ||
$scope.user = {}; | ||
} | ||
</file> | ||
</example> | ||
|
||
|
||
|
||
# Non-immediate (debounced) model updates | ||
|
||
You can delay the model update/validation by using the `debounce` key with the | ||
{@link ng.directive:ngModelOptions ngModelOptions} directive. This delay will also apply to | ||
parsers, validators and model flags like `$dirty` or `$pristine`. | ||
|
||
I.e. `ng-model-options="{ debounce: 500 }"` will wait for half a second since | ||
the last content change before triggering the model update and form validation. | ||
|
||
If custom triggers are used, custom debouncing timeouts can be set for each event using 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 } }"` | ||
|
||
If those attributes are added to an element, they will be applied to all the child elements and controls that inherit from it unless they are | ||
overridden. | ||
|
||
This example shows how to debounce model changes. Model will be updated only 250 milliseconds after last change. | ||
|
||
<example> | ||
<file name="index.html"> | ||
<div ng-controller="ControllerUpdateOn"> | ||
<form> | ||
Name: | ||
<input type="text" ng-model="user.name" ng-model-options="{ debounce: 250 }" /><br /> | ||
</form> | ||
<pre>username = "{{user.name}}"</pre> | ||
</div> | ||
</file> | ||
<file name="script.js"> | ||
function ControllerUpdateOn($scope) { | ||
$scope.user = {}; | ||
} | ||
</file> | ||
</example> | ||
|
||
|
||
|
||
# Custom Validation | ||
|
||
Angular provides basic implementation for most common html5 {@link ng.directive:input input} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Personally I put controllers in a module, even in examples. But I see that this has not been done for the other examples so you are being consistent.