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

Author: AlmeroSteyn

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

@@ -14,6 +14,10 @@
         What do you like most about Angular 2?
     </a11y-checkboxes>
 
+    <a11y-radiobuttons [radiobuttonModel]="radioButtons" [radiobuttonName]="'language'">
+        Choose your favourite Angular 2 language:
+    </a11y-radiobuttons>
+
 
     <div class="form-group">
         <label for="a11yreason">Why are you interested in a11y?

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

@@ -3,35 +3,25 @@ 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";
+import {A11yHelper} from "./services/a11y-helper.service";
+import {A11yRadiobuttons} from "./a11y-radiobuttons.component";
 
 @Component({
     selector: 'a11y-form-controls',
     templateUrl: './app/a11y-form-controls.component.html',
-    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, A11yInput, A11yInputExplicit, A11yCheckboxes]
+    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, A11yInput, A11yInputExplicit, A11yCheckboxes, A11yRadiobuttons]
 })
 export class A11yFormControls implements OnInit{
 
     checkBoxes: any;
+    radioButtons: any;
+
+    constructor(private _a11yHelper: A11yHelper){
+    }
 
     ngOnInit(){
-        this.checkBoxes = [
-            {
-                name: 'Template syntax',
-                value: 0
-            },
-            {
-                name: 'Observables',
-                value: 1
-            },
-            {
-                name: 'Components',
-                value: 2
-            },
-            {
-                name: 'Forms',
-                value: 3
-            }
-        ];
+        this.checkBoxes = this._a11yHelper.getCheckboxModel();
+        this.radioButtons = this._a11yHelper.getRadiobuttonsModel();
     }
 
     submit(formValue: any):void{

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

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

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

@@ -0,0 +1,12 @@
+import {Input, Component} from "angular2/core";
+
+@Component({
+    selector: 'a11y-radiobuttons',
+    templateUrl: './app/a11y-radiobuttons.component.html'
+})
+export class A11yRadiobuttons {
+    @Input()
+    radiobuttonName: string;
+    @Input()
+    radiobuttonModel: any;
+}

public/docs/_examples/cb-a11y/ts/app/services/a11y-helper.service.ts

@@ -3,17 +3,59 @@ import {Injectable} from "angular2/core";
 @Injectable()
 export class A11yHelper {
     generateUniqueIdString():string {
-        return (this.randomGuidSnippet() + 
-        this.randomGuidSnippet() + "-" + 
-        this.randomGuidSnippet() + "-4" + 
-        this.randomGuidSnippet().substr(0,3) + "-" + 
-        this.randomGuidSnippet() + "-" + 
-        this.randomGuidSnippet() + 
-        this.randomGuidSnippet() + 
+        return (this.randomGuidSnippet() +
+        this.randomGuidSnippet() + "-" +
+        this.randomGuidSnippet() + "-4" +
+        this.randomGuidSnippet().substr(0, 3) + "-" +
+        this.randomGuidSnippet() + "-" +
+        this.randomGuidSnippet() +
+        this.randomGuidSnippet() +
         this.randomGuidSnippet()).toLowerCase();
     }
 
-    private randomGuidSnippet (): string {
-        return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
+    getCheckboxModel():any {
+        return [
+            {
+                name: 'Template syntax',
+                value: 0
+            },
+            {
+                name: 'Observables',
+                value: 1
+            },
+            {
+                name: 'Components',
+                value: 2
+            },
+            {
+                name: 'Forms',
+                value: 3
+            }
+        ];
+    }
+
+    getRadiobuttonsModel():any {
+        return [
+            {
+                name: 'TypeScript',
+                value: 0
+            },
+            {
+                name: 'JavaScript',
+                value: 1
+            },
+            {
+                name: 'ES6',
+                value: 2
+            },
+            {
+                name: 'Dart',
+                value: 3
+            }
+        ];
+    }
+
+    private randomGuidSnippet():string {
+        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
     }
 }