iOS switch

ionic/components/switch/test/basic/index.ts

@@ -1,24 +1,32 @@
-import {FormBuilder, Validators} from 'angular2/forms';
-
 import {App} from 'ionic/ionic';
-
+import {
+  Control,
+  ControlGroup,
+  NgForm,
+  formDirectives,
+  Validators,
+  NgControl,
+  ControlValueAccessor,
+  NgControlName,
+  NgFormModel,
+  FormBuilder
+} from 'angular2/forms';
 
 @App({
   templateUrl: 'main.html'
 })
 class IonicApp {
   constructor() {
-
-    var fb = new FormBuilder();
-    this.form = fb.group({
-      enableFun: ['', Validators.required],
-      enableIceCream: [false, Validators.required],
-      enablePizza: [true, Validators.required]
+    this.fruitsForm = new ControlGroup({
+      "appleCtrl": new Control({"checked": false, "value": "apple"}),
+      "bananaCtrl": new Control(true),
+      "cherryCtrl": new Control({"checked": false, "value": 12}),
+      "grapeCtrl": new Control("grape")
     });
   }
 
   doSubmit(ev) {
-    console.log('Submitting form', this.form.value);
-    ev.preventDefault();
+    console.log('Submitting form', this.fruitsForm.value);
+    event.preventDefault();
   }
 }

ionic/components/switch/test/basic/main.html

@@ -1,25 +1,35 @@
+
+<ion-toolbar><ion-title>Switches</ion-title></ion-toolbar>
+
+
 <ion-content>
 
-  <form (^submit)="doSubmit($event)" [control-group]="form">
+  <form (^submit)="doSubmit($event)">
+
+    <ion-list>
+
+      <ion-switch aria-checked="true">
+        <label id="appleLabel">Apple</label>
+        <input checked="true" type="checkbox">
+      </ion-switch>
+
+      <ion-switch>
+        <label>Banana</label>
+        <input value="test" type="checkbox">
+      </ion-switch>
+
+      <ion-switch aria-checked="true">
+        <label>Cherry</label>
+        <input type="checkbox">
+      </ion-switch>
+
+      <ion-switch>
+        <label>Grape</label>
+        <input value="test" checked="checked" type="checkbox">
+      </ion-switch>
 
     <ion-list>
-      <div class="list-header">Some Switches</div>
-      <ion-switch control="enableFun">
-        Enable Fun?
-      </ion-switch>
-      <ion-switch control="enableIceCream">
-        Enable Ice Cream?
-      </ion-switch>
-      <ion-switch control="enablePizza">
-        Enable Pizza?
-      </ion-switch>
-    </ion-list>
 
-    Is fun enabled? <b>{{form.controls.enableFun.value}}</b>
-    <br>
-    Is ice cream enabled? <b>{{form.controls.enableIceCream.value}}</b>
-    <br>
-    Is pizza enabled? <b>{{form.controls.enablePizza.value}}</b>
   </form>
 
 </ion-content>