Skip to content

Commit 2c01fcc

Browse files
committed
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 609b411 commit 2c01fcc

File tree

6 files changed

+533
-91
lines changed

6 files changed

+533
-91
lines changed

angularFiles.js

+1
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ angularFiles = {
6060
'src/ng/directive/ngStyle.js',
6161
'src/ng/directive/ngSwitch.js',
6262
'src/ng/directive/ngTransclude.js',
63+
'src/ng/directive/ngUpdateModel.js',
6364
'src/ng/directive/script.js',
6465
'src/ng/directive/select.js',
6566
'src/ng/directive/style.js'

docs/content/guide/forms.ngdoc

+40
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,46 @@ This allows us to extend the above example with these features:
175175
</doc:example>
176176

177177

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

179219
# Custom Validation
180220

src/AngularPublic.js

+4
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,8 @@
4747
ngValueDirective,
4848
ngAttributeAliasDirectives,
4949
ngEventDirectives,
50+
ngUpdateModelOnDirective,
51+
ngUpdateModelDebounceDirective,
5052
5153
$AnchorScrollProvider,
5254
$AnimateProvider,
@@ -174,6 +176,8 @@ function publishExternalAPI(angular){
174176
ngChange: ngChangeDirective,
175177
required: requiredDirective,
176178
ngRequired: requiredDirective,
179+
ngUpdateModelOn: ngUpdateModelOnDirective,
180+
ngUpdateModelDebounce: ngUpdateModelDebounceDirective,
177181
ngValue: ngValueDirective
178182
}).
179183
directive(ngAttributeAliasDirectives).

0 commit comments

Comments
 (0)