ngForms

Wijmo for Angular 2 components can be used in Angular Forms in the same way as native HTML input controls.

Getting Started

In addition to the usual way of binding attributes to component values, Wijmo's Angular 2 components support binding via the ngModel directive. The ngModel Angular directive augments Wijmo components 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 ngModel. When an ngModel is used on a Wijmo component, it establishes a binding for the "main value" property of the component. This "main value" property varies from component to component, for example, the value property for InputNumber or InputDate components and the selectedValue property for ComboBox or ListBox components. In order to bind to a different property using the ngModel directive, you can specify the desired property name in the wjModelProperty attribute on the component element. For example, you can bind "text" property of InputNumber by setting [wjModelProperty]="'text'" or "selectedIndex" property of ComboBox by setting [wjModelProperty]="'selectedIndex'".

This example shows a form with native input [type=number] control and multiple Wijmo InputNumber and ComboBox components. Each of them is bound to component properties using the ngModel directive. Each of the controls defines the name attribute that forces ngModel to publish the control state in the form instance.

This example implements the evenNumber 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. The native Angular required validator is also applied to these controls. There are a span elements next to each control that checks for the evenNumber and required error keys in the control’s state published in the ngModel instances and shows an error message if the key is found there.

This example also defines CSS rules for the ngModel 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.

Apart from the InputNumber controls, the form contains two ComboBox controls as well, which are bound using ngModel 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 wjModelProperty attribute on the control’s directive element.

Dynamic Forms

This is a modification of the Angular 2 Dynamic Forms example that uses Wijmo input components. It demonstrates how to create dynamic forms driven by data.

The following modifications were made in the original sample:

• WjComboBox component is used instead of native select element.
• Added NumericQuestion (question-numeric.ts file) represented by the WjInputNumber component in a form.
• Shows a form control state at the right of a corresponding UI control, to allow you better understand how it changes.