angular2-app.ts
1.78 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/// <reference path="typings/angular2/angular2.d.ts" />
/// <reference path="typings/kendo-ui/kendo-ui.d.ts" />
import {Component, View, bootstrap, FORM_DIRECTIVES, ControlGroup, Control } from 'angular2/angular2';
import {KendoValueAccessor} from 'kendo/angular2';
@Component({
selector: 'my-app'
})
@View({
template: `
<form [ng-form-model]='capForm'>
<div id="cap"></div>
<p>
<pre class="order-status">{{ formState() }}</pre>
</p>
<h4 style="margin-top: 2em;">Change Color</h4>
<kendo-dropdownlist [options]="dropDownListOptions" data-text-field="text" data-value-field="value" ng-control="color" style="text-align: left;"></kendo-dropdownlist>
<h4 style="margin-top: 2em;">Change Amount</h4>
<kendo-numerictextbox min="0" max="10" format="n0" ng-control="amount"></kendo-numerictextbox>
<h4 style="margin-top: 2em;">Or just</h4>
<button class="k-button k-primary" (click)="preSet()">Help me choose</button>
</form>
`,
directives: [FORM_DIRECTIVES, KendoValueAccessor]
})
class MyAppComponent {
cap: { color: Number } = { color: 1 };
colors = [
{ text: "Black", value: 1 },
{ text: "Orange", value: 2 },
{ text: "Grey", value: 3 }
];
dropDownListOptions: {
dataSource: Array<Object>
};
capForm: ControlGroup;
constructor() {
this.dropDownListOptions = {
dataSource: this.colors
}
this.capForm = new ControlGroup({
color: new Control(2),
amount: new Control(3)
});
}
formState() {
return JSON.stringify(this.capForm.value);
}
preSet() {
this.capForm.controls.color.updateValue(3);
this.capForm.controls.amount.updateValue(10);
}
}
bootstrap(MyAppComponent);