docs(cb-dynamic-form): new cookbook on dyn form gen with NgFormModel

Author: thelgevold

public/docs/_examples/cb-dynamic-form/e2e-spec.js

@@ -0,0 +1,24 @@
+describe('Dynamic Form', function () {
+
+    beforeAll(function () {
+        browser.get('');
+    });
+
+    it('should submit form', function () {
+      var firstNameElement = element.all(by.css('input[id=firstName]')).get(0);
+      expect(firstNameElement.getAttribute('value')).toEqual('Bombasto');
+      
+      var emailElement = element.all(by.css('input[id=emailAddress]')).get(0);
+      var email = '[email protected]';
+      emailElement.sendKeys(email);
+      expect(emailElement.getAttribute('value')).toEqual(email);   
+      
+      element(by.css('select option[value="solid"]')).click()
+      
+      var 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/ts/.gitignore

@@ -0,0 +1 @@
+**/*.js

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

@@ -0,0 +1,23 @@
+// #docregion
+import {Component}       from 'angular2/core'
+import {DynamicForm}     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: [DynamicForm],
+  providers:  [QuestionService]
+})
+export class AppComponent {
+  questions:any[]
+
+  constructor(service: QuestionService) {
+    this.questions = service.getQuestions();
+  }
+}

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

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

@@ -0,0 +1,14 @@
+// #docregion
+import {Component, Input} from 'angular2/core';
+import {ControlGroup}     from 'angular2/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/ts/app/dynamic-form.component.html

@@ -0,0 +1,17 @@
+<!-- #docregion -->
+<div>
+  <form (ngSubmit)="onSubmit()" [ngFormModel]="form">
+
+    <div *ngFor="#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/ts/app/dynamic-form.component.ts

@@ -0,0 +1,30 @@
+// #docregion
+import {Component, Input, OnInit}  from 'angular2/core';
+import {ControlGroup}              from 'angular2/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 DynamicForm {
+
+  @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/ts/app/main.ts

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

public/docs/_examples/cb-dynamic-form/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/ts/app/question-control.service.ts

@@ -0,0 +1,18 @@
+// #docregion
+import {Injectable}   from 'angular2/core';
+import {ControlGroup, FormBuilder, Validators} from 'angular2/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] : [];
+    });
+    return this._fb.group(group);
+  }
+}