diff --git a/modules/examples/src/forms/index.es6 b/modules/examples/src/forms/index.ts
similarity index 63%
rename from modules/examples/src/forms/index.es6
rename to modules/examples/src/forms/index.ts
index 68618dcd94..87c84956f4 100644
--- a/modules/examples/src/forms/index.es6
+++ b/modules/examples/src/forms/index.ts
@@ -1,22 +1,22 @@
-import {bootstrap, NgIf, NgFor, EventEmitter} from 'angular2/angular2';
-import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
+import {bootstrap, NgIf, NgFor, EventEmitter, Component, View} from 'angular2/angular2';
+import {
+ FormBuilder,
+ Validators,
+ formDirectives,
+ ControlGroup,
+ Control,
+ ControlArray
+} from 'angular2/forms';
-// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
-// add those imports back into 'angular2/angular2';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {ObservableWrapper} from 'angular2/src/facade/async';
+import {print} from 'angular2/src/facade/lang';
// HeaderFields renders the bound header control group. It can used as follows:
//
//
//
// This component is self-contained and can be tested in isolation.
-@Component({
- selector: 'survey-header',
- properties: {
- "header" : "header"
- }
-})
+@Component({selector: 'survey-header', properties: {"header": "header"}})
@View({
template: `
@@ -45,7 +45,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
directives: [formDirectives, NgIf]
})
class HeaderFields {
- header:ControlGroup;
+ header: ControlGroup;
}
@@ -59,10 +59,7 @@ class HeaderFields {
@Component({
selector: 'survey-question',
events: ['destroy'],
- properties: {
- "question" : "question",
- "index" : "index"
- }
+ properties: {"question": "question", "index": "index"}
})
@View({
template: `
@@ -104,28 +101,23 @@ class HeaderFields {
directives: [formDirectives, NgIf]
})
class SurveyQuestion {
- question:ControlGroup;
- index:number;
- destroy:EventEmitter;
+ question: ControlGroup;
+ index: number;
+ destroy: EventEmitter;
- constructor() {
- this.destroy = new EventEmitter();
- }
+ constructor() { this.destroy = new EventEmitter(); }
- deleteQuestion() {
+ deleteQuestion(): void {
// Invoking an injected event emitter will fire an event,
// which in this case will result in calling `deleteQuestion(i)`
- this.destroy.next(null);
+ ObservableWrapper.callNext(this.destroy, null);
}
}
// SurveyBuilder is a form that allows you to create a survey.
-@Component({
- selector: 'survey-builder-app',
- appInjector: [FormBuilder]
-})
+@Component({selector: 'survey-builder-app', appInjector: [FormBuilder]})
@View({
template: `
Create New Survey
@@ -147,33 +139,31 @@ class SurveyQuestion {
directives: [formDirectives, NgFor, HeaderFields, SurveyQuestion]
})
class SurveyBuilder {
- form:ControlGroup;
- builder:FormBuilder;
+ form: ControlGroup;
- constructor(b:FormBuilder) {
- this.builder = b;
- this.form = b.group({
- "header" : b.group({
- "title" : ["", Validators.required],
- "description" : ["", Validators.required],
- "date" : ""
+ constructor(public builder: FormBuilder) {
+ this.form = builder.group({
+ "header": builder.group({
+ "title": ["", Validators.required],
+ "description": ["", Validators.required],
+ "date": ""
}),
- "questions": b.array([])
+ "questions": builder.array([])
});
}
- addQuestion() {
- var newQuestion = this.builder.group({
- "type": ["", Validators.required],
- "questionText": ["", Validators.required],
- "responseLength": [100, Validators.required]
- }, {
- // Optional controls can be dynamically added or removed from the form.
- // Here, the responseLength field is optional and not included by default.
- "optionals": {
- "responseLength": false
- }
- });
+ addQuestion(): void {
+ var newQuestion: ControlGroup = this.builder.group(
+ {
+ "type": ["", Validators.required],
+ "questionText": ["", Validators.required],
+ "responseLength": [100, Validators.required]
+ },
+ {
+ // Optional controls can be dynamically added or removed from the form.
+ // Here, the responseLength field is optional and not included by default.
+ "optionals": {"responseLength": false}
+ });
// Every Control has an observable of value changes. You can subscribe to this observable
// to update the form, update the application model, etc.
@@ -181,20 +171,25 @@ class SurveyBuilder {
// complex form interactions in a declarative fashion.
//
// We are disabling the responseLength control when the question type is checkbox.
- newQuestion.controls.type.valueChanges.observer({
- next: (v) => v == 'text' || v == 'textarea' ? newQuestion.include('responseLength') : newQuestion.exclude('responseLength')
- });
+ var typeCtrl: Control = newQuestion.controls['type'];
- this.form.controls.questions.push(newQuestion);
+ ObservableWrapper.subscribe(typeCtrl.valueChanges,
+ (v) => v == 'text' || v == 'textarea' ?
+ newQuestion.include('responseLength') :
+ newQuestion.exclude('responseLength'));
+
+ (this.form.controls['questions']).push(newQuestion);
}
- destroyQuestion(index:number) {
- this.form.controls.questions.removeAt(index);
+ destroyQuestion(index: number): void {
+ (this.form.controls['questions']).removeAt(index);
}
- submitForm() {
- console.log("Submitting a form")
- console.log("value", this.form.value, "valid", this.form.valid, "errors", this.form.errors);
+ submitForm(): void {
+ print('Submitting a form');
+ print(`"value: ${this.form.value}`);
+ print(` valid: $ { this.form.valid } `);
+ print(` errors: $ { this.form.errors }`);
}
}