From 325b5100b23df83e4844112207855e689f2d17e5 Mon Sep 17 00:00:00 2001
From: Dmitriy Shekhovtsov <valorkin@gmail.com>
Date: Mon, 19 Jun 2017 18:29:02 +0300
Subject: [PATCH] fix(demo): fix buttons reactive forms sample

---
 .../+buttons/buttons-section.component.ts     |  2 +-
 .../+buttons/demos/checkbox/checkbox.html     |  9 ++------
 .../radio-reactiveforms.html                  | 22 ++++++++-----------
 .../radio-reactiveforms.ts                    | 15 +++++++------
 4 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/demo/src/app/components/+buttons/buttons-section.component.ts b/demo/src/app/components/+buttons/buttons-section.component.ts
index bdf17f3acd..2703436e07 100644
--- a/demo/src/app/components/+buttons/buttons-section.component.ts
+++ b/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>
diff --git a/demo/src/app/components/+buttons/demos/checkbox/checkbox.html b/demo/src/app/components/+buttons/demos/checkbox/checkbox.html
index 34cb7ed0bb..bad8ac5c51 100644
--- a/demo/src/app/components/+buttons/demos/checkbox/checkbox.html
+++ b/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>
diff --git a/demo/src/app/components/+buttons/demos/radio-reactiveforms/radio-reactiveforms.html b/demo/src/app/components/+buttons/demos/radio-reactiveforms/radio-reactiveforms.html
index f66b249697..fe9f44f43d 100644
--- a/demo/src/app/components/+buttons/demos/radio-reactiveforms/radio-reactiveforms.html
+++ b/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>
diff --git a/demo/src/app/components/+buttons/demos/radio-reactiveforms/radio-reactiveforms.ts b/demo/src/app/components/+buttons/demos/radio-reactiveforms/radio-reactiveforms.ts
index b07deca1db..efcc82e801 100644
--- a/demo/src/app/components/+buttons/demos/radio-reactiveforms/radio-reactiveforms.ts
+++ b/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
     });
   }
 }