docs(dynamic-cookbook): upgrade to use new forms api

convert exiting to use deprecated name

converted to new api

text

warnings

fix plunker

text

test weak

text

space

text

lint

order

tweak

Author: thelgevold

public/docs/_examples/cb-dynamic-form-deprecated/e2e-spec.ts

@@ -0,0 +1,27 @@
+/// <reference path='../_protractor/e2e.d.ts' />
+'use strict';
+/* tslint:disable:quotemark */
+describe('Dynamic Form Deprecated', function () {
+
+    beforeAll(function () {
+        browser.get('');
+    });
+
+    it('should submit form', function () {
+      let firstNameElement = element.all(by.css('input[id=firstName]')).get(0);
+      expect(firstNameElement.getAttribute('value')).toEqual('Bombasto');
+
+      let emailElement = element.all(by.css('input[id=emailAddress]')).get(0);
+      let email = '[email protected]';
+      emailElement.sendKeys(email);
+      expect(emailElement.getAttribute('value')).toEqual(email);
+
+      element(by.css('select option[value="solid"]')).click();
+
+      let saveButton = element.all(by.css('button')).get(0);
+      saveButton.click().then(function(){
+        expect(element(by.xpath("//strong[contains(text(),'Saved the following values')]")).isPresent()).toBe(true);
+      });
+  });
+
+});

public/docs/_examples/cb-dynamic-form-deprecated/ts/app/app.component.ts

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

public/docs/_examples/cb-dynamic-form-deprecated/ts/app/dynamic-form-question.component.html

@@ -0,0 +1,17 @@
+<!-- #docregion -->
+<div [ngFormModel]="form">
+  <label [attr.for]="question.key">{{question.label}}</label>
+
+  <div [ngSwitch]="question.controlType">
+
+    <input *ngSwitchWhen="'textbox'" [ngControl]="question.key"
+            [id]="question.key" [type]="question.type">
+
+    <select [id]="question.key" *ngSwitchWhen="'dropdown'" [ngControl]="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>

public/docs/_examples/cb-dynamic-form-deprecated/ts/app/dynamic-form-question.component.ts

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

public/docs/_examples/cb-dynamic-form-deprecated/ts/app/dynamic-form.component.html

@@ -0,0 +1,17 @@
+<!-- #docregion -->
+<div>
+  <form (ngSubmit)="onSubmit()" [ngFormModel]="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>

public/docs/_examples/cb-dynamic-form-deprecated/ts/app/dynamic-form.component.ts

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

public/docs/_examples/cb-dynamic-form-deprecated/ts/app/main.ts

@@ -0,0 +1,6 @@
+import { bootstrap }    from '@angular/platform-browser-dynamic';
+
+import { AppComponent } from './app.component';
+
+bootstrap(AppComponent, [])
+  .catch((err: any) => console.error(err));

public/docs/_examples/cb-dynamic-form-deprecated/ts/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 || '';
+  }
+}

public/docs/_examples/cb-dynamic-form-deprecated/ts/app/question-control.service.ts

@@ -0,0 +1,18 @@
+// #docregion
+import { Injectable }   from '@angular/core';
+import { FormBuilder, Validators } from '@angular/common';
+import { QuestionBase } from './question-base';
+
+@Injectable()
+export class QuestionControlService {
+  constructor(private fb: FormBuilder) { }
+
+  toControlGroup(questions: QuestionBase<any>[] ) {
+    let group = {};
+
+    questions.forEach(question => {
+      group[question.key] = question.required ? [question.value || '', Validators.required] : [question.value || ''];
+    });
+    return this.fb.group(group);
+  }
+}

public/docs/_examples/cb-dynamic-form-deprecated/ts/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'] || [];
+  }
+}