In this blog post, I will show you how you can create a Wijmo 5 InputNumber control using AngularJS which will bind this InputNumber control to an ngModel validator ( even only ) directive that will alert the user if an odd number is to be submitted on our form. After we have done this, I will show you how to add debounce functionality to the same control. In addition to the usual way of binding directive attributes to scope values, Wijmo Directives now offers support for binding via the ngModel Angular Directive. The ngModel Angular directive augments Wijmo directives with functionalities like numeric validation, adding the control’s state to the form’s instance, automatic styling of the control via CSS classes of ngModel, debouncing and so on. Using the ngModel, we can establish a ‘main value’ property to bind our control to. Each unique control can have its own binding property. So let’s go ahead and create a small sample that demonstrates this. To begin we need to load in some references; two external and a few Wijmo related.
<!-- Third Party -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<!-- Wijmo references (required) -->
<script src="http://cdn.wijmo.com/5.20151.48/controls/wijmo.min.js" type="text/javascript"></script>
<link href="http://cdn.wijmo.com/5.20151.48/styles/wijmo.min.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.wijmo.com/5.20151.48/controls/wijmo.input.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.20151.48/interop/angular/wijmo.angular.min.js" type="text/javascript"></script>
Since we are working in AngularJS, let's add our module declaration in our JavaScript and inject our Wijmo dependencies
angular.module('app', ['wj']);
var app = angular.module('app');
Now let’s switch back to our view and add the Wijmo InputNumber controls. The first control will instantly validate any changes to the control, while the second control will validate changes after a period of one second using the debounce ngModelOption. At this time, we’ll also bind the two controls to our controller using the ngModel directive.
<form name="form1" class="form">
<div class="form-group">
</div>
<div class="form-group">
</div>
</form>
</body>
Now let’s add an Angular controller, appCtrl, and use it to provide some data for our the Wijmo controls.
app.controller('appCtrl', function appCtrl($scope) {
$scope.num = 2;
$scope.num1 = 4;
});
Moving back to our view Inside our form’s divs, let's add these two Wijmo InputNumber boxes. One of these will do instant validation and the other will implement debounce.
<wj-input-number format="n"
name="input1">
<wj-input-number>
and
<wj-input-number format="n"
name="input2">
<wj-input-number>
Respectively. Before we actually create the ngModel directive in our JavaScript let's add model declaration to our view or more specifically, the markup for the InputNumber control.
<wj-input-number format="n"
name="input1"
ng-model="num"
style="height:20px;"
even-number >
</wj-input-number>
And
<wj-input-number format="n"
name="input2"
ng-model="num1"
style="height:20px;"
even-number >
</wj-input-number>
At this point if you run the application you should see two Wijmo InputNumber controls. Now, let's talk about ngModel. The Input Control in this case is bound to a scope using the ngModel directive. The InputNumber control defines the name attribute that forces ng-model to publish the control state in the form instance. We now need to implement the even-number validator directive that will respond if we try to submit an odd number. Note: we will use modular math here to validate even or odd.
// even-number validator directive
app.directive('evenNumber', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.push(function (viewValue) {
ctrl.$setValidity('evenNumber',!viewValue || viewValue % 2 === 0);
return viewValue;
});
}
};
});
Go ahead and add the following directive to our two input boxes inside the InputNumber control even-number Finally, now that we have the input bound to our ngModel, we need to add the CSS properties to give visual feedback to the user. We will define CSS rules for the ng-model state classes: ng-pristine (darker background), ng-valid (green border) and ng-invalid (red border). Notice that these rules automatically get applied to native input as well as to Wijmo InputNumber controls depending on their states.
<style type="text/css">
/* ng-model state classes */
form input.ng-pristine,
form .ng-pristine.wj-control {
background-color: #f4f4f4;
}
.ng-valid {
border-color: lightgreen;
}
.ng-invalid {
border-color: red;
}
</style>
If we run the application now, we should see the textboxes following the color patterns defined above. The last thing to talk about is debounce. Imagine if the user has to click the input control 50 times to get to the number they want, we don’t want the directive validating every single button click, but only the final value that they select. So let's give our second input control
ng-model-options="{ debounce: 1000 }"
and you may observe that a bound scope property is updated with a one second delay after value in the control has changed. Download the sample to get started! NGModelSample
MESCIUS inc.