Switch compiles

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

@@ -1,7 +1,7 @@
 <ion-content class="padding">
   <form (^submit)="doSubmit($event)" [control-group]="form">
 
-    <ion-segment [control]="mapStyle">
+    <ion-segment control="mapStyle">
       <ion-segment-button value="standard" ion-button>
         Standard
       </ion-segment-button>

ionic/components/switch/switch.js

@@ -1,15 +1,21 @@
-import {Component, View, NgElement} from 'angular2/angular2'
+import {NgElement, Renderer, ElementRef, Component, DefaultValueAccessor, View, Ancestor, Optional, Decorator, Directive} from 'angular2/angular2'
+import {ControlGroup, ControlDirective} from 'angular2/forms'
+import {dom} from 'ionic/util';
 import {IonicComponent} from 'ionic/config/component'
+import {Button} from 'ionic/components/button/button'
 
 
 @Component({
   selector: 'ion-switch',
   properties: {
     checked: 'checked'
-  },
+  }
+  /*
+  TODO: For some reason this triggers a 'TypeError: array.map is not a function'
   events: {
     'click': 'onClick()'
   }
+  */
 })
 @View({
   template: `
@@ -43,11 +49,11 @@ export class Switch {
 
     this.domElement.classList.add('item')
 
-    setAriaRole('checkbox')
-    setInvalid('false')
-    setDisabled('false')
-
-    this.setChecked = setChecked
+    // TODO: These rely on the commented-out PropertySetter's above
+    //setAriaRole('checkbox')
+    //setInvalid('false')
+    //setDisabled('false')
+    //this.setChecked = setChecked
   }
 
   set checked(checked) {

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

@@ -1,26 +1,15 @@
+<ion-content>
 
-<ion-view nav-title="Switches">
-
-  <ion-content>
-
+  <form (^submit)="doSubmit($event)" [control-group]="form">
     <div class="list-header">Some Switches</div>
 
     <ion-list>
 
-      <ion-switch [checked]="true">
-        Apples
-      </ion-switch>
-
-      <ion-switch>
-        Bananas
-      </ion-switch>
-
-      <ion-switch [disabled]="true">
-        Oranges
+      <ion-switch control="enableFun">
+        Enable Fun?
       </ion-switch>
 
     </ion-list>
+  </form>
 
-  </ion-content>
-
-</ion-view>
+</ion-content>

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

@@ -1,16 +1,24 @@
-import {Component, View, bootstrap} from 'angular2/angular2';
-import {Content} from 'ionic/components/content/content';
-import {Switch} from 'ionic/components/switch/switch';
-import {List} from 'ionic/components/list/list';
+import {Component, View, bootstrap} from 'angular2/angular2'
+import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
+import {IONIC_DIRECTIVES} from 'ionic/ionic'
 
 @Component({ selector: '[ion-app]' })
 @View({
   templateUrl: 'main.html',
-  directives: [Content, Switch, List]
+  directives: [FormDirectives].concat(IONIC_DIRECTIVES)
 })
 class IonicApp {
   constructor() {
-    console.log('IonicApp Start')
+
+    var fb = new FormBuilder();
+    this.form = fb.group({
+      enableFun: ['', Validators.required]
+    });
+  }
+
+  doSubmit(event) {
+    console.log('Submitting form', this.form.value);
+    event.preventDefault();
   }
 }
 

ionic/directives.js

@@ -1,6 +1,8 @@
 import {Button, Switch, List, Label,
-  Item, Input, Content, Segment, SegmentButton} from 'ionic/ionic';
+  Item, Input, Content, Segment, SegmentButton,
+} from 'ionic/ionic';
 
-var IONIC_DIRECTIVES = [Button, List, Label, Item, Content, Segment, SegmentButton];
+var IONIC_DIRECTIVES = [Button, Switch, List, Label,
+  Item, Content, Segment, SegmentButton];
 
 export {IONIC_DIRECTIVES};