Skip to content

Commit c93c454

Browse files
committed
feat(ngModelOptions): Model update behavior can now be customized
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
1 parent c704f76 commit c93c454

File tree

3 files changed

+502
-80
lines changed

3 files changed

+502
-80
lines changed

docs/content/guide/forms.ngdoc

+77
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,83 @@ This allows us to extend the above example with these features:
181181

182182

183183

184+
# Custom triggers
185+
186+
By default, any change to the content will trigger a model update and form validation. You can
187+
override this behavior using the {@link ng.directive:ngModelOptions ngModelOptions} directive to
188+
bind only to specified list of events. I.e. `ng-model-options="{ updateOn: "blur" }"` will update
189+
and validate only after the control loses focus. You can set a single event using an array instead
190+
of a string. I.e. `ng-model-options="{ updateOn: ["mousedown", "blur"] }"`
191+
192+
If you want to keep the default behavior and just add new events that may trigger the model update
193+
and validation, add "default" as one of the specified events.
194+
195+
I.e. `ng-model-options="{ updateOn: ["default", "blur"] }"`
196+
197+
The following example shows how to override immediate updates. Changes on the inputs within the form will update the model
198+
only when the control loses focus (blur event).
199+
200+
<example>
201+
<file name="index.html">
202+
<div ng-controller="ControllerUpdateOn">
203+
<form>
204+
Name:
205+
<input type="text" ng-model="user.name" ng-model-options="{ updateOn: "blur" }" /><br />
206+
Other data:
207+
<input type="text" ng-model="user.data" /><br />
208+
</form>
209+
<pre>username = "{{user.name}}"</pre>
210+
</div>
211+
</file>
212+
<file name="script.js">
213+
function ControllerUpdateOn($scope) {
214+
$scope.user = {};
215+
}
216+
</file>
217+
</example>
218+
219+
220+
221+
# Non-immediate (debounced) model updates
222+
223+
You can delay the model update/validation by using the `debounce` key with the
224+
{@link ng.directive:ngModelOptions ngModelOptions} directive. This delay will also apply to
225+
parsers, validators and model flags like `$dirty` or `$pristine`.
226+
227+
228+
I.e. `ng-model-options="{ debounce: 500 }"` will wait for half a second since
229+
the last content change before triggering the model update and form validation.
230+
231+
If custom triggers are used, custom debouncing timeouts can be set for each event using an object
232+
in `debounce`. This can be useful to force immediate updates on some specific circumstances
233+
(like blur events).
234+
235+
I.e. `ng-model-options="{ updateOn: ["default", "blur"], debounce: { default: 500, blur: 0 } }"`
236+
237+
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
238+
overridden.
239+
240+
This example shows how to debounce model changes. Model will be updated only 250 milliseconds after last change.
241+
242+
<example>
243+
<file name="index.html">
244+
<div ng-controller="ControllerUpdateOn">
245+
<form>
246+
Name:
247+
<input type="text" ng-model="user.name" ng-model-options="{ debounce: 250 }" /><br />
248+
</form>
249+
<pre>username = "{{user.name}}"</pre>
250+
</div>
251+
</file>
252+
<file name="script.js">
253+
function ControllerUpdateOn($scope) {
254+
$scope.user = {};
255+
}
256+
</file>
257+
</example>
258+
259+
260+
184261
# Custom Validation
185262

186263
Angular provides basic implementation for most common html5 {@link ng.directive:input input}

0 commit comments

Comments
 (0)