fix(demo): fix buttons reactive forms sample

demo/src/app/components/+buttons/buttons-section.component.ts

@@ -53,7 +53,7 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
   </ng-sample-box>
     
   <h2 routerLink="." fragment="radio-reactiveforms" id="radio-reactiveforms">Radio with ReactiveForms</h2>
-  <p>Radio buttons with ReactiveForms</p>
+  <p>Checkbox buttons with ReactiveForms</p>
   <ng-sample-box [ts]="demos.radioReactiveForms.component" [html]="demos.radioReactiveForms.html">
     <demo-buttons-radio-reactiveforms></demo-buttons-radio-reactiveforms>
   </ng-sample-box>

demo/src/app/components/+buttons/demos/checkbox/checkbox.html

@@ -1,10 +1,5 @@
-<pre class="card card-block card-header">
-  Model via JsonPipe: {{checkModel | json}}</pre>
-<pre class="card card-block card-header">
-Left: {{checkModel.left}}
-Middle: {{checkModel.middle}}
-Right: {{checkModel.right}}</pre>
-<!--<pre class="card card-block card-header">Results: {{checkResults}}</pre>-->
+<pre class="card card-block card-header">{{checkModel | json}}</pre>
+
 <div class="btn-group">
   <label class="btn btn-primary" [(ngModel)]="checkModel.left"
          btnCheckbox>Left</label>

demo/src/app/components/+buttons/demos/radio-reactiveforms/radio-reactiveforms.html

@@ -1,17 +1,13 @@
-<pre class="card card-block card-header">{{myForm.controls.myControl.value}}</pre>
+<pre class="card card-block card-header">{{myForm.value | json}}</pre>
 <form [formGroup]="myForm">
   <div class="btn-group">
-    <label class="btn btn-primary" [class.active]="myForm.controls.myControl.value == 'Left'">
-      <input type="radio" formControlName="myControl" style="display:none" value="Left">
-      Left
-    </label>
-    <label class="btn btn-primary" [class.active]="myForm.controls.myControl.value == 'Middle'">
-      <input type="radio" formControlName="myControl" style="display:none" value="Middle">
-      Middle
-    </label>
-    <label class="btn btn-primary" [class.active]="myForm.controls.myControl.value == 'Right'">
-      <input type="radio" formControlName="myControl" style="display:none" value="Right">
-      Right
-    </label>
+    <label class="btn btn-primary" [class.active]="myForm.value.left"
+           btnCheckbox formControlName="left">Left</label>
+
+    <label class="btn btn-primary" [class.active]="myForm.value.middle"
+           btnCheckbox formControlName="middle">Middle</label>
+
+    <label class="btn btn-primary" [class.active]="myForm.value.right"
+           btnCheckbox formControlName="right">Right</label>
   </div>
 </form>

demo/src/app/components/+buttons/demos/radio-reactiveforms/radio-reactiveforms.ts

@@ -1,20 +1,21 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 @Component({
   selector: 'demo-buttons-radio-reactiveforms',
   templateUrl: './radio-reactiveforms.html'
 })
-export class DemoButtonsRadioReactiveFormsComponent {
+export class DemoButtonsRadioReactiveFormsComponent implements OnInit {
   public myForm: FormGroup;
 
-  constructor(private fb: FormBuilder) {
-    this.createForm();
+  constructor(private formBuilder: FormBuilder) {
   }
 
-  createForm() {
-    this.myForm = this.fb.group({
-      myControl: ['Middle', Validators.required]
+  ngOnInit() {
+    this.myForm = this.formBuilder.group({
+      left: false,
+      middle: true,
+      right: false
     });
   }
 }