docs(aio): rename cb- files and a few others

aio/content/examples/dynamic-form/src/app/app.component.ts

@@ -0,0 +1,22 @@
+// #docregion
+import { Component }       from '@angular/core';
+
+import { QuestionService } from './question.service';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <div>
+      <h2>Job Application for Heroes</h2>
+      <dynamic-form [questions]="questions"></dynamic-form>
+    </div>
+  `,
+  providers:  [QuestionService]
+})
+export class AppComponent {
+  questions: any[];
+
+  constructor(service: QuestionService) {
+    this.questions = service.getQuestions();
+  }
+}

aio/content/examples/dynamic-form/src/app/app.module.ts

@@ -0,0 +1,18 @@
+// #docregion
+import { BrowserModule }                from '@angular/platform-browser';
+import { ReactiveFormsModule }          from '@angular/forms';
+import { NgModule }                     from '@angular/core';
+
+import { AppComponent }                 from './app.component';
+import { DynamicFormComponent }         from './dynamic-form.component';
+import { DynamicFormQuestionComponent } from './dynamic-form-question.component';
+
+@NgModule({
+  imports: [ BrowserModule, ReactiveFormsModule ],
+  declarations: [ AppComponent, DynamicFormComponent, DynamicFormQuestionComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {
+  constructor() {
+  }
+}

aio/content/examples/dynamic-form/src/app/dynamic-form-question.component.html

@@ -0,0 +1,17 @@
+<!-- #docregion -->
+<div [formGroup]="form">
+  <label [attr.for]="question.key">{{question.label}}</label>
+
+  <div [ngSwitch]="question.controlType">
+
+    <input *ngSwitchCase="'textbox'" [formControlName]="question.key"
+            [id]="question.key" [type]="question.type">
+
+    <select [id]="question.key" *ngSwitchCase="'dropdown'" [formControlName]="question.key">
+      <option *ngFor="let opt of question.options" [value]="opt.key">{{opt.value}}</option>
+    </select>
+
+  </div> 
+
+  <div class="errorMessage" *ngIf="!isValid">{{question.label}} is required</div>
+</div>

aio/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts

@@ -0,0 +1,15 @@
+// #docregion
+import { Component, Input } from '@angular/core';
+import { FormGroup }        from '@angular/forms';
+
+import { QuestionBase }     from './question-base';
+
+@Component({
+  selector: 'df-question',
+  templateUrl: './dynamic-form-question.component.html'
+})
+export class DynamicFormQuestionComponent {
+  @Input() question: QuestionBase<any>;
+  @Input() form: FormGroup;
+  get isValid() { return this.form.controls[this.question.key].valid; }
+}

aio/content/examples/dynamic-form/src/app/dynamic-form.component.html

@@ -0,0 +1,17 @@
+<!-- #docregion -->
+<div>
+  <form (ngSubmit)="onSubmit()" [formGroup]="form">
+
+    <div *ngFor="let question of questions" class="form-row">
+      <df-question [question]="question" [form]="form"></df-question>
+    </div>
+
+    <div class="form-row">
+      <button type="submit" [disabled]="!form.valid">Save</button>
+    </div>
+  </form>
+
+  <div *ngIf="payLoad" class="form-row">
+    <strong>Saved the following values</strong><br>{{payLoad}}
+  </div>
+</div>

aio/content/examples/dynamic-form/src/app/dynamic-form.component.ts

@@ -0,0 +1,28 @@
+// #docregion
+import { Component, Input, OnInit }  from '@angular/core';
+import { FormGroup }                 from '@angular/forms';
+
+import { QuestionBase }              from './question-base';
+import { QuestionControlService }    from './question-control.service';
+
+@Component({
+  selector: 'dynamic-form',
+  templateUrl: './dynamic-form.component.html',
+  providers: [ QuestionControlService ]
+})
+export class DynamicFormComponent implements OnInit {
+
+  @Input() questions: QuestionBase<any>[] = [];
+  form: FormGroup;
+  payLoad = '';
+
+  constructor(private qcs: QuestionControlService) {  }
+
+  ngOnInit() {
+    this.form = this.qcs.toFormGroup(this.questions);
+  }
+
+  onSubmit() {
+    this.payLoad = JSON.stringify(this.form.value);
+  }
+}

aio/content/examples/dynamic-form/src/app/question-base.ts

@@ -0,0 +1,25 @@
+// #docregion
+export class QuestionBase<T>{
+  value: T;
+  key: string;
+  label: string;
+  required: boolean;
+  order: number;
+  controlType: string;
+
+  constructor(options: {
+      value?: T,
+      key?: string,
+      label?: string,
+      required?: boolean,
+      order?: number,
+      controlType?: string
+    } = {}) {
+    this.value = options.value;
+    this.key = options.key || '';
+    this.label = options.label || '';
+    this.required = !!options.required;
+    this.order = options.order === undefined ? 1 : options.order;
+    this.controlType = options.controlType || '';
+  }
+}

aio/content/examples/dynamic-form/src/app/question-control.service.ts

@@ -0,0 +1,20 @@
+// #docregion
+import { Injectable }   from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+
+import { QuestionBase } from './question-base';
+
+@Injectable()
+export class QuestionControlService {
+  constructor() { }
+
+  toFormGroup(questions: QuestionBase<any>[] ) {
+    let group: any = {};
+
+    questions.forEach(question => {
+      group[question.key] = question.required ? new FormControl(question.value || '', Validators.required)
+                                              : new FormControl(question.value || '');
+    });
+    return new FormGroup(group);
+  }
+}

aio/content/examples/dynamic-form/src/app/question-dropdown.ts

@@ -0,0 +1,12 @@
+// #docregion
+import { QuestionBase } from './question-base';
+
+export class DropdownQuestion extends QuestionBase<string> {
+  controlType = 'dropdown';
+  options: {key: string, value: string}[] = [];
+
+  constructor(options: {} = {}) {
+    super(options);
+    this.options = options['options'] || [];
+  }
+}

aio/content/examples/dynamic-form/src/app/question-textbox.ts

@@ -0,0 +1,12 @@
+// #docregion
+import { QuestionBase } from './question-base';
+
+export class TextboxQuestion extends QuestionBase<string> {
+  controlType = 'textbox';
+  type: string;
+
+  constructor(options: {} = {}) {
+    super(options);
+    this.type = options['type'] || '';
+  }
+}

aio/content/examples/dynamic-form/src/app/question.service.ts

@@ -0,0 +1,47 @@
+// #docregion
+import { Injectable }       from '@angular/core';
+
+import { DropdownQuestion } from './question-dropdown';
+import { QuestionBase }     from './question-base';
+import { TextboxQuestion }  from './question-textbox';
+
+@Injectable()
+export class QuestionService {
+
+  // Todo: get from a remote source of question metadata
+  // Todo: make asynchronous
+  getQuestions() {
+
+    let questions: QuestionBase<any>[] = [
+
+      new DropdownQuestion({
+        key: 'brave',
+        label: 'Bravery Rating',
+        options: [
+          {key: 'solid',  value: 'Solid'},
+          {key: 'great',  value: 'Great'},
+          {key: 'good',   value: 'Good'},
+          {key: 'unproven', value: 'Unproven'}
+        ],
+        order: 3
+      }),
+
+      new TextboxQuestion({
+        key: 'firstName',
+        label: 'First name',
+        value: 'Bombasto',
+        required: true,
+        order: 1
+      }),
+
+      new TextboxQuestion({
+        key: 'emailAddress',
+        label: 'Email',
+        type: 'email',
+        order: 2
+      })
+    ];
+
+    return questions.sort((a, b) => a.order - b.order);
+  }
+}

aio/content/examples/dynamic-form/src/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <base href="/">
+    <title>Dynamic Form</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- #docregion style -->
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="sample.css">
+    <!-- #enddocregion style -->
+
+    <!-- Polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+  <body>
+    <my-app>Loading app...</my-app>
+  </body>
+
+</html>

aio/content/examples/dynamic-form/src/main.ts

@@ -0,0 +1,5 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

aio/content/examples/dynamic-form/src/sample.css

@@ -0,0 +1,7 @@
+.errorMessage{
+  color:red;
+}
+
+.form-row{
+  margin-top: 10px;
+}