docs(cb-a11y): Building examples - Form controls

Author: AlmeroSteyn

public/docs/_examples/cb-a11y/ts/app/a11y-checkboxes.component.html

@@ -0,0 +1,11 @@
+<fieldset class="form-group row">
+    <div class="col-xs-12">
+        <legend><ng-content></ng-content></legend>
+        <div *ngFor="#checkbox of checkboxModel" class="checkbox col-xs-12">
+            <label>
+                <input type="checkbox" [value]="checkbox.value" [name]="checkboxName">
+                {{checkbox.name}}
+            </label>
+        </div>
+    </div>
+</fieldset>

public/docs/_examples/cb-a11y/ts/app/a11y-checkboxes.component.ts

@@ -0,0 +1,14 @@
+import {Component, Input} from "angular2/core";
+
+@Component({
+    selector: 'a11y-checkboxes',
+    templateUrl: './app/a11y-checkboxes.component.html'
+})
+export class A11yCheckboxes {
+    
+    @Input()
+    checkboxName: string;
+    @Input()
+    checkboxModel: any;
+    
+}

public/docs/_examples/cb-a11y/ts/app/a11y-form-controls.component.html

@@ -3,18 +3,18 @@
 
     <a11y-input>Label for input:</a11y-input>
 
-    <div class="form-group">
-        <label>Test
-            <input class="form-control">
-        </label>
-    </div>
 
     <div class="form-group">
         <label>Test
             <textarea class="form-control"></textarea>
         </label>
     </div>
 
+    <a11y-checkboxes [checkboxModel]="checkBoxes" [checkboxName]="'likes'">
+        What do you like most about Angular 2?
+    </a11y-checkboxes>
+
+
     <div class="form-group">
         <label for="a11yreason">Why are you interested in a11y?
             <select id="a11yreason" name="a11yreason" class="form-control">
@@ -25,7 +25,6 @@
         </label>
     </div>
 
-
     <label for="fortextArea">
         Label for text area:
     </label>

public/docs/_examples/cb-a11y/ts/app/a11y-form-controls.component.ts

@@ -1,14 +1,38 @@
-import {Component} from "angular2/core";
+import {Component, OnInit} from "angular2/core";
 import {CORE_DIRECTIVES, FORM_DIRECTIVES} from "angular2/common";
 import {A11yInput} from "./a11y-input.component";
 import {A11yInputExplicit} from "./a11y-input-explicit.component";
+import {A11yCheckboxes} from "./a11y-checkboxes.component";
 
 @Component({
     selector: 'a11y-form-controls',
     templateUrl: './app/a11y-form-controls.component.html',
-    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, A11yInput, A11yInputExplicit]
+    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, A11yInput, A11yInputExplicit, A11yCheckboxes]
 })
-export class A11yFormControls {
+export class A11yFormControls implements OnInit{
+
+    checkBoxes: any;
+
+    ngOnInit(){
+        this.checkBoxes = [
+            {
+                name: 'Template syntax',
+                value: 0
+            },
+            {
+                name: 'Observables',
+                value: 1
+            },
+            {
+                name: 'Components',
+                value: 2
+            },
+            {
+                name: 'Forms',
+                value: 3
+            }
+        ];
+    }
 
     submit(formValue: any):void{
         console.log(formValue)