In the previous post, we looked at some of the basic forms and custom form validations in angularJS. We discussed these concepts with some examples in the earlier post. In this post, we are going to discuss about a directive introduced Angular 1.3 called ng-model-options and how it is used in our forms to control the model updates.
ngModelOptions
The ngModelOptions gives us control over how Angular updates and manipulates your model. By default, any change to the content will trigger a model update and form validation. We can override this default behavior using ngModelOptions directive. This includes customizing the model to update only after certain events are triggered or non-immediate model updates/debouncing delay, so that the actual update takes place only when a timer expires. We will discuss these two things in this post.
Syntax
The following code shows the usage of ngModelOptions directive in angularJS.
|
1 |
<input ng-model="employee.name" ng-model-options="Object" /> |
Here Object denotes the options that can be applied to the current model. The following optionS are used:
updateOn: A string value specifying the events in which the input is bound to. You can specify multiple events using a space delimited list likeng-model-options="{ updateOn: 'blur mouseover' }"debounce: Defines an integer value which denotes a model update delay in milliseconds. We can set the value to zero if we want to trigger an immediate update. You can use this option likeng-model-options="{ updateOn: 'blur', debounce: { 'blur': 0} }"allowInvalid: It’s a boolean value which indicates that the model value can be set regardless of the validity of the field. The default value for model is undefined if we are not specifying theallowInvalidoption.getterSetter: boolean value used to determine whether to treat function bound to model as getters or setters or not.timezone: Defines the time zone to be used.
Using updateOn and debounce option
The following example demonstrates the use of updateOn and debouce option in the ngModelOptions directive.
We defined a FormController in the formApp module and created an employee object in its scope.
app.js
|
1 2 3 4 5 6 |
var app = angular.module('formApp', []); app.controller('FormController', function($scope) { $scope.employee = {}; }); |
The novalidate attribute is used to disable the default browser validation in HTML5.
In the following code, you can see how we used updateOn option of the ng-model-options directive. The model value updates when the focus is lost.
|
1 |
Name : <input type="text" ng-model="employee.name" ng-model-options="{updateOn:'blur'}"/> |
The following code is used to update the model after 250 milliseconds. The debounce option delays the model update.
|
1 |
Gender : <input type="text" ng-model="employee.gender" ng-model-options="{debounce:250}"/> |
The following code uses both updateOn and debounce option. Setting the debounce value of blur event to ‘0’ indicates that the model trigger immediate update when it is out of focus.
|
1 |
Email : <input type="email" ng-model="employee.email" ng-model-options="{updateOn:'blur',debounce:{blur:0} }"/> |
The following example shows the usage of these concepts.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS Custom Model Update</title> </head> <body ng-app="formApp"> <div ng-controller="FormController"> <form novalidate> Name : <input type="text" ng-model="employee.name" ng-model-options="{updateOn:'blur'}"/></br> Gender : <input type="text" ng-model="employee.gender" ng-model-options="{debounce:250}"/></br> E-mail : <input type="email" ng-model="employee.email" ng-model-options="{updateOn:'blur',debounce:{blur:0} }"/></br> </form> <p>Name : {{employee.name}}</p> <p>Gender : {{employee.gender}}</p> <p>Email : {{employee.email}}</p> </div> </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script type="text/javascript" src="app.js"></script> </body> </html> |
Now you can play with following output and see the difference of these options.
The ng-model-options directive introduced in angularJS 1.3 is very useful in form handling and validation. You have to use it carefully for better results. That’s all for now and you will see more angular features in the coming posts.