Skip to content

Commit

Permalink
feat(input): Allow custom events and timeouts to trigger model updates
Browse files Browse the repository at this point in the history
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
  • Loading branch information
lrlopez committed Mar 6, 2014
1 parent 168b0b9 commit e07ebf5
Show file tree
Hide file tree
Showing 6 changed files with 501 additions and 54 deletions.
1 change: 1 addition & 0 deletions angularFiles.js
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ angularFiles = {
'src/ng/directive/ngStyle.js',
'src/ng/directive/ngSwitch.js',
'src/ng/directive/ngTransclude.js',
'src/ng/directive/ngUpdateModel.js',
'src/ng/directive/script.js',
'src/ng/directive/select.js',
'src/ng/directive/style.js'
Expand Down
40 changes: 40 additions & 0 deletions docs/content/guide/forms.ngdoc
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,46 @@ This allows us to extend the above example with these features:
</example>


# Non-immediate (debounced) or custom triggered model updates

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`
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"`

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
the last content change before triggering the model update and form validation. This debouncing feature is not available on radio buttons.

Custom debouncing timeouts can be set for each event for each event if you use an object in `ng-update-model-on`.
I.e. `ng-update-model-on="{default: 500, blur: 0}"`

Using the object notation allows any valid Angular expression to be used inside, including data and function calls from the scope.

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
overriden.

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).

<doc:example>
<doc:source>
<div ng-controller="ControllerUpdateOn">
<form name="form" class="css-form" ng-update-model-on="blur">
Name:
<input type="text" ng-model="user.name" name="uName" /><br />
</form>
<pre>model = {{user | json}}</pre>
</div>
<script>
function ControllerUpdateOn($scope) {
$scope.user = {};
}
</script>
</doc:source>
</doc:example>


# Custom Validation

Expand Down
4 changes: 4 additions & 0 deletions src/AngularPublic.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@
ngValueDirective,
ngAttributeAliasDirectives,
ngEventDirectives,
ngUpdateModelOnDirective,
ngUpdateModelDebounceDirective,
$AnchorScrollProvider,
$AnimateProvider,
Expand Down Expand Up @@ -183,6 +185,8 @@ function publishExternalAPI(angular){
ngChange: ngChangeDirective,
required: requiredDirective,
ngRequired: requiredDirective,
ngUpdateModelOn: ngUpdateModelOnDirective,
ngUpdateModelDebounce: ngUpdateModelDebounceDirective,
ngValue: ngValueDirective
}).
directive({
Expand Down
Loading

0 comments on commit e07ebf5

Please sign in to comment.