ngModel
This page shows how to bind Wijmo controls using the ngModel directive.
This page shows how to bind Wijmo controls using the ngModel directive.
In addition to the usual way of binding attributes to scope values, Wijmo's Angular directives support binding via the ng-model directive. The ng-model Angular directive augments Wijmo directives with its functionalities like validation, adding the control’s state to the form instance, automatic styling of the control using state CSS classes (like ng-dirty and ng-invalid) of ng-model, debouncing and so on. When an ng-model is used on a Wijmo control directive, it establishes a binding for the "main value" property of the control. This "main value" property varies from control to control, for example, the value property for InputNumber or InputDate controls and the selectedValue property for ComboBox or ListBox controls. In order to bind to a different property using the ng-model directive, you can specify the desired property name in the wj-model-property attribute on the directive element. For example, you can bind "text" property of InputNumber by setting wj-model-property="text" or "selectedIndex" property of combobox by setting wj-model-property="selectedIndex".
This example shows a form with native input [type=number] control and multiple Wijmo InputNumber and ComboBox controls. Each of them is bound to a scope using the ng-model directive. Each of the controls defines the name attribute that forces ng-model to publish the control state in the form instance.
This example implements the even-number validator directive that reports errors for odd values. The validator is applied to all input controls including the native input control and Wijmo InputNumber controls. There is a span element next to each control that checks for the even-number error key in the control’s state published in the form instance and shows an error message if the key is found there.
This example also defines 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.
The last InputNumber control has 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.
Apart from the InputNumber controls, the form contains two ComboBox controls as well, which are bound using ng-model to different control properties. The first one is bound to the selectedValue property(default behavior), and the second one is bound to the selectedIndex property by using the wj-model-property attribute on the control’s directive element.