Checkbox kind of works

ionic/components.js

@@ -3,9 +3,9 @@
 // export * from 'ionic/components/alert/alert'
 export * from 'ionic/components/aside/aside'
 export * from 'ionic/components/button/button'
-// export * from 'ionic/components/checkbox/checkbox'
+export * from 'ionic/components/checkbox/checkbox'
 export * from 'ionic/components/content/content'
-// export * from 'ionic/components/icon/icon'
+export * from 'ionic/components/icon/icon'
 export * from 'ionic/components/item/item'
 export * from 'ionic/components/form/form'
 export * from 'ionic/components/form/input/input'

ionic/components/checkbox/checkbox.js

@@ -1,4 +1,5 @@
-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 {IonicComponent} from 'ionic/config/component'
 
 
@@ -7,8 +8,8 @@ import {IonicComponent} from 'ionic/config/component'
   properties: {
     checked: 'checked'
   },
-  events: {
-    '^click': 'onClick()'
+  hostListeners: {
+    '^click': 'onClick($event)'
   }
 })
 @View({
@@ -28,7 +29,8 @@ import {IonicComponent} from 'ionic/config/component'
 })
 export class Checkbox {
   constructor(
-    @NgElement() ngElement: NgElement
+    @NgElement() ngElement: NgElement,
+    cd: ControlDirective
     // @PropertySetter('attr.role') setAriaRole: Function,
     // @PropertySetter('attr.aria-checked') setAriaChecked: Function,
     // @PropertySetter('attr.aria-invalid') setAriaInvalid: Function,
@@ -36,13 +38,15 @@ export class Checkbox {
   ) {
     this.domElement = ngElement.domElement
     this.domElement.classList.add('item')
+    this.controlDirective = cd;
+    cd.valueAccessor = this;
 
     let setAriaRole = (v) => this.domElement.setAttribute('aria-role', v)
     let setAriaChecked = (v) => this.domElement.setAttribute('aria-checked', v)
     let setAriaInvalid = (v) => this.domElement.setAttribute('aria-invalid', v)
     let setAriaDisabled = (v) => this.domElement.setAttribute('aria-disabled', v)
 
-    this.config = Checkbox.config.invoke(this)
+    Checkbox.config.invoke(this);
 
     setAriaRole('checkbox')
     setAriaInvalid('false')
@@ -53,14 +57,26 @@ export class Checkbox {
     this.setAriaInvalid = setAriaInvalid
     this.setAriaDisabled = setAriaDisabled
 
+    this.setCheckedProperty = setAriaChecked
+
     // TODO: FIXME!! MAKE MORE GOOD!!!!
     this.domElement.querySelector('.checkbox-off').classList.add(this.iconOff)
     this.domElement.querySelector('.checkbox-on').classList.add(this.iconOn)
   }
 
+  /**
+   * Much like ngModel, this is called from our valueAccessor for the attached
+   * ControlDirective to update the value internally.
+   */
+  writeValue(value) {
+    // Convert it to a boolean
+    this.checked = !!value;
+  }
+
   set checked(checked) {
     this._checked = checked
-    this.setAriaChecked(checked)
+    this.setCheckedProperty(checked)
+    this.controlDirective._control().updateValue(this._checked);
   }
   get checked() {
     return this._checked

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

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

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

@@ -1,17 +1,23 @@
-import {Component, View, bootstrap} from 'angular2/angular2';
-import {Content} from 'ionic/components/content/content';
-import {Icon} from 'ionic/components/icon/icon';
-import {Checkbox} from 'ionic/components/checkbox/checkbox';
-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, Icon, Checkbox, List]
+  directives: [FormDirectives].concat(IONIC_DIRECTIVES)
 })
 class IonicApp {
   constructor() {
-    console.log('IonicApp Start')
+    var fb = new FormBuilder();
+    this.form = fb.group({
+      addCats: ['yes', Validators.required]
+    });
+  }
+
+  doSubmit(event) {
+    console.log('Submitting form', this.form.value);
+    event.preventDefault();
   }
 }
 

ionic/components/switch/switch.js

@@ -2,7 +2,6 @@ import {NgElement, Renderer, ElementRef, Component, DefaultValueAccessor, View,
 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',
@@ -27,7 +26,7 @@ import {Button} from 'ionic/components/button/button'
       <content></content>
     </div>
 
-    <div class="item-media media-switch" (^click)="onClick($event)">
+    <div class="item-media media-switch">
       <div class="switch-toggle"></div>
     </div>
 

ionic/directives.js

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