Skip to content

Commit 8c32c33

Browse files
lrlopezpetebacondarwin
authored andcommitted
feat(input): Allow custom events and timeouts to trigger model updates
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
1 parent c7e0bc7 commit 8c32c33

File tree

8 files changed

+511
-63
lines changed

8 files changed

+511
-63
lines changed

angularFiles.js

+1
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ angularFiles = {
6363
'src/ng/directive/ngStyle.js',
6464
'src/ng/directive/ngSwitch.js',
6565
'src/ng/directive/ngTransclude.js',
66+
'src/ng/directive/ngUpdateModel.js',
6667
'src/ng/directive/script.js',
6768
'src/ng/directive/select.js',
6869
'src/ng/directive/style.js'

docs/content/guide/forms.ngdoc

+40
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,46 @@ This allows us to extend the above example with these features:
180180
</example>
181181

182182

183+
# Non-immediate (debounced) or custom triggered model updates
184+
185+
By default, any change on the content will trigger a model update and form validation. You can override this behavior using the `ng-update-model-on`
186+
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
187+
focus.
188+
189+
If you want to keep the default behavior and just add new events that may trigger the model update
190+
and validation, add "default" as one of the specified events. I.e. `ng-update-model-on="default,mousedown"`
191+
192+
You can delay the model update/validation using `ng-update-model-debounce`. I.e. `ng-update-model-debounce="500"` will wait for half a second since
193+
the last content change before triggering the model update and form validation. This debouncing feature is not available on radio buttons.
194+
195+
Custom debouncing timeouts can be set for each event for each event if you use an object in `ng-update-model-on`.
196+
I.e. `ng-update-model-on="{default: 500, blur: 0}"`
197+
198+
Using the object notation allows any valid Angular expression to be used inside, including data and function calls from the scope.
199+
200+
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
201+
overriden.
202+
203+
The following example shows how to override immediate updates. Changes on the inputs within the form will update the model
204+
only when the control loses focus (blur event).
205+
206+
<doc:example>
207+
<doc:source>
208+
<div ng-controller="ControllerUpdateOn">
209+
<form name="form" class="css-form" ng-update-model-on="blur">
210+
Name:
211+
<input type="text" ng-model="user.name" name="uName" /><br />
212+
</form>
213+
<pre>model = {{user | json}}</pre>
214+
</div>
215+
<script>
216+
function ControllerUpdateOn($scope) {
217+
$scope.user = {};
218+
}
219+
</script>
220+
</doc:source>
221+
</doc:example>
222+
183223

184224
# Custom Validation
185225

src/AngularPublic.js

+4
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@
4848
ngValueDirective,
4949
ngAttributeAliasDirectives,
5050
ngEventDirectives,
51+
ngUpdateModelOnDirective,
52+
ngUpdateModelDebounceDirective,
5153
5254
$AnchorScrollProvider,
5355
$AnimateProvider,
@@ -183,6 +185,8 @@ function publishExternalAPI(angular){
183185
ngChange: ngChangeDirective,
184186
required: requiredDirective,
185187
ngRequired: requiredDirective,
188+
ngUpdateModelOn: ngUpdateModelOnDirective,
189+
ngUpdateModelDebounce: ngUpdateModelDebounceDirective,
186190
ngValue: ngValueDirective
187191
}).
188192
directive({

0 commit comments

Comments
 (0)