From b09624024b8e9624da43a5d85b9e91e8db18c8a8 Mon Sep 17 00:00:00 2001
From: vsavkin <vic.savkin@gmail.com>
Date: Tue, 24 Mar 2015 15:56:56 -0700
Subject: [PATCH] example(forms): added a example of using forms

---
 modules/examples/src/forms/index.es6  | 197 ++++++++++++++++++++++++++
 modules/examples/src/forms/index.html |  11 ++
 2 files changed, 208 insertions(+)
 create mode 100644 modules/examples/src/forms/index.es6
 create mode 100644 modules/examples/src/forms/index.html

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:
+//
+//   <survey-header [header]="header"></survey-header>
+//
+// This component is self-contained and can be tested in isolation.
+@Component({
+  selector: 'survey-header',
+  bind: {
+    "header" : "header"
+  }
+})
+@Template({
+  inline: `
+      <div [control-group]="header">
+        <div>
+          <label>Title:</label> <br/>
+          <input type="text" control="title"/>
+          <div *if="! header.controls.title.valid && header.controls.title.dirty">
+            Title is required
+          </div>
+        </div>
+
+        <div>
+          <label>Description:</label> <br/>
+          <textarea control="description"></textarea>
+          <div *if="! header.controls.description.valid && header.controls.description.dirty">
+            Description is required
+          </div>
+        </div>
+
+        <div>
+          <label>Publish Date:</label> <br/>
+          <input type="date" control="date"/>
+        </div>
+      </div>
+  `,
+  directives: [FormDirectives, If]
+})
+class HeaderFields {
+  header:ControlGroup;
+}
+
+
+
+// SurveyQuestion renders an individual question. It can used as follows:
+//
+//   <survey-question [question]="question" [index]="i" (delete)="onDelete()"></survey-question>
+//
+// 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: `
+      <h2>Question #{{index}}</h2>
+
+      <button (click)="deleteQuestion()">Delete</button>
+
+      <div [control-group]="question">
+        <div>
+          <label>Type:</label> <br/>
+          <select control="type">
+            <option value=""></option>
+            <option value="text">Text</option>
+            <option value="checkbox">Checkbox</option>
+            <option value="textarea">Textarea</option>
+          </select>
+          <div *if="! question.controls.type.valid && question.controls.type.dirty">
+            Type is required
+          </div>
+        </div>
+
+        <div>
+          <label>Question:</label> <br/>
+          <input type="text" control="questionText">
+          <div *if="! question.controls.questionText.valid && question.controls.questionText.dirty">
+            Question is required
+          </div>
+        </div>
+
+        <div *if="question.contains('responseLength')">
+          <label>Response Length:</label> <br/>
+          <input type="number" control="responseLength">
+          <div *if="! question.controls.responseLength.valid && question.controls.responseLength.dirty">
+            Length is required
+          </div>
+        </div>
+      </div>
+  `,
+  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: `
+    <h1>Create New Survey</h1>
+
+    <div [control-group]="form">
+      <survey-header [header]="form.controls.header"></survey-header>
+
+      <button (click)="addQuestion()">Add Question</button>
+      <survey-question
+          *for="var q of form.controls.questions.controls; var i=index"
+          [question]="q"
+          [index]="i + 1"
+          (delete)="deleteQuestion(i)">
+      </survey-question>
+
+      <button (click)="submitForm()">Submit</button>
+    </div>
+  `,
+  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 @@
+<!doctype html>
+<html>
+  <title>Survey Builder</title>
+<body>
+  <survey-builder-app>
+    Loading...
+  </survey-builder-app>
+
+  $SCRIPTS$
+</body>
+</html>