diff --git a/modules/examples/src/forms/index.es6 b/modules/examples/src/forms/index.es6
new file mode 100644
index 0000000000..62b07c8dfe
--- /dev/null
+++ b/modules/examples/src/forms/index.es6
@@ -0,0 +1,197 @@
+import {bootstrap, Component, Decorator, Template, If, For, EventEmitter} from 'angular2/angular2';
+import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
+
+// 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',
+ bind: {
+ "header" : "header"
+ }
+})
+@Template({
+ inline: `
+
+
+
+
+
+ Title is required
+
+
+
+
+
+
+
+ Description is required
+
+
+
+
+
+
+
+
+ `,
+ directives: [FormDirectives, If]
+})
+class HeaderFields {
+ header:ControlGroup;
+}
+
+
+
+// SurveyQuestion renders an individual question. It can used as follows:
+//
+//
+//
+// SurveyQuestion uses EventEmitter to fire the delete action.
+// This component is self-contained and can be tested in isolation.
+@Component({
+ selector: 'survey-question',
+ bind: {
+ "question" : "question",
+ "index" : "index"
+ }
+})
+@Template({
+ inline: `
+
Question #{{index}}
+
+
+
+
+
+
+
+
+ Type is required
+
+
+
+
+
+
+
+ Question is required
+
+
+
+
+
+
+
+ Length is required
+
+
+
+ `,
+ directives: [FormDirectives, If]
+})
+class SurveyQuestion {
+ question:ControlGroup;
+ index:number;
+ onDelete:Function;
+
+ constructor(@EventEmitter("delete") onDelete:Function) {
+ this.onDelete = onDelete;
+ }
+
+ deleteQuestion() {
+ // Invoking an injected event emitter will fire an event,
+ // which in this case will result in calling `deleteQuestion(i)`
+ this.onDelete();
+ }
+}
+
+
+
+// SurveyBuilder is a form that allows you to create a survey.
+@Component({
+ selector: 'survey-builder-app',
+ services: [FormBuilder]
+})
+@Template({
+ inline: `
+
Create New Survey
+
+
+
+
+
+
+
+
+
+
+ `,
+ directives: [FormDirectives, For, HeaderFields, SurveyQuestion]
+})
+class SurveyBuilder {
+ form:ControlGroup;
+ builder:FormBuilder;
+
+ constructor(b:FormBuilder) {
+ this.builder = b;
+ this.form = b.group({
+ "header" : b.group({
+ "title" : ["", Validators.required],
+ "description" : ["", Validators.required],
+ "date" : ""
+ }),
+ "questions": b.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
+ }
+ });
+
+ // Every Control has an observable of value changes. You can subscribe to this observable
+ // to update the form, update the application model, etc.
+ // These observables can also be transformed and combined. This enables implementing
+ // complex form interactions in a declarative fashion.
+ //
+ // We are disabling the responseLength control when the question type is checkbox.
+ newQuestion.controls.type.valueChanges.subscribe((v) =>
+ v == 'text' || v == 'textarea' ?
+ newQuestion.include('responseLength') : newQuestion.exclude('responseLength'));
+
+ this.form.controls.questions.push(newQuestion);
+ }
+
+ deleteQuestion(index:number) {
+ 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);
+ }
+}
+
+export function main() {
+ bootstrap(SurveyBuilder);
+}
\ No newline at end of file
diff --git a/modules/examples/src/forms/index.html b/modules/examples/src/forms/index.html
new file mode 100644
index 0000000000..17ef21f8f0
--- /dev/null
+++ b/modules/examples/src/forms/index.html
@@ -0,0 +1,11 @@
+
+
+ Survey Builder
+
+
+ Loading...
+
+
+ $SCRIPTS$
+
+