forms wip

ionic/components/checkbox/checkbox.js

@@ -1,4 +1,6 @@
-import {ElementRef} from 'angular2/angular2'
+import {ElementRef, Renderer} from 'angular2/angular2';
+import {isPresent} from 'angular2/src/facade/lang';
+import {setProperty} from 'angular2/src/forms/directives/shared'
 
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
@@ -6,7 +8,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
 import {onInit} from 'angular2/angular2';
 
 //pretty sure this has changed in the latest angular
-import {ControlDirective} from 'angular2/forms';
+import {NgControl} from 'angular2/forms';
 import {IonicComponent} from '../../config/component';
 import {Icon} from '../icon/icon';
 
@@ -38,21 +40,32 @@ export class Checkbox {
       },
       host: {
         '(^click)': 'onClick($event)',
+        '[checked]': 'checked',
         '[attr.aria-checked]': 'checked',
         '[attr.aria-disabled]': 'disabled',
         '[attr.value]': 'value',
         'role': 'checkbox',
-        'class': 'item'
+        'class': 'item',
+        '[class.ng-untouched]': 'ngClassUntouched',
+        '[class.ng-touched]': 'ngClassTouched',
+        '[class.ng-pristine]': 'ngClassPristine',
+        '[class.ng-dirty]': 'ngClassDirty',
+        '[class.ng-valid]': 'ngClassValid',
+        '[class.ng-invalid]': 'ngClassInvalid'
       },
-      appInjector: [ ControlDirective ]
+      appInjector: [ NgControl ]
     }
   }
 
   constructor(
-    cd: ControlDirective
+    ngControl: NgControl,
+    renderer: Renderer,
+    elementRef: ElementRef
   ) {
-    this.controlDirective = cd;
-    cd.valueAccessor = this;
+    this.ngControl = ngControl;
+    this.renderer = renderer;
+    this.elementRef = elementRef;
+    this.ngControl.valueAccessor = this;
   }
 
   onInit() {
@@ -66,10 +79,12 @@ export class Checkbox {
   writeValue(value) {
     // Convert it to a boolean
     this.checked = !!value;
+    setProperty(this.renderer, this.elementRef, "checked", value);
   }
 
   set checked(checked) {
     this._checked = checked
+    this.ngControl.control.checked = checked;
     //this.controlDirective._control().updateValue(this._checked);
   }
   get checked() {
@@ -79,4 +94,22 @@ export class Checkbox {
     this.checked = !this.checked;
   }
 
+  get ngClassUntouched() {
+    return isPresent(this.ngControl.control) ? this.ngControl.control.untouched : false;
+  }
+  get ngClassTouched() {
+    return isPresent(this.ngControl.control) ? this.ngControl.control.touched : false;
+  }
+  get ngClassPristine() {
+    return isPresent(this.ngControl.control) ? this.ngControl.control.pristine : false;
+  }
+  get ngClassDirty() { return isPresent(this.ngControl.control) ? this.ngControl.control.dirty : false; }
+  get ngClassValid() { return isPresent(this.ngControl.control) ? this.ngControl.control.valid : false; }
+  get ngClassInvalid() {
+    return isPresent(this.ngControl.control) ? !this.ngControl.control.valid : false;
+  }
+
+  registerOnChange(fn): void { this.onChange = fn; }
+  registerOnTouched(fn): void { this.onTouched = fn; }
+
 }

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

@@ -1,25 +1,87 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {FormBuilder, Validators, formDirectives} from 'angular2/forms';
+import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {IonicView} from 'ionic/ionic';
+import {Query, QueryList, NgFor} from 'angular2/angular2';
+// import {FormBuilder, Validators, NgFormControl, Control, NgControlName, NgControlGroup, ControlContainer} from 'angular2/forms';
+import {
+  Control,
+  ControlGroup,
+  NgForm,
+  formDirectives,
+  Validators,
+  NgControl,
+  ControlValueAccessor,
+  NgControlName,
+  NgFormModel
+} from 'angular2/forms';
+import {Checkbox, Content, List} from 'ionic/ionic';
+//import {IONIC_DIRECTIVES} from 'ionic/ionic'
 
+// @Component({
+//   selector: 'checkbox-wrapper',
+//   properties: [
+//     'ctrl'
+//   ]
+// })
+// @View({ //TODO: Pass in component property as checkbox content?
+//   template: `<ion-checkbox [ng-form-control]="ctrl">
+//     {{ctrlname}}
+//   </ion-checkbox>`,
+//   directives: [IonicApp, Checkbox, NgFormControl]
+// })
+// class CheckboxWrapper{
+//   constructor(@Query(Checkbox, {descendants: true}) checkboxes: QueryList){
+//     this.checkboxes = checkboxes;
+//
+//     //doesn't work
+//     this.checkboxes.onChange(this.onCheckboxChange);
+//     setTimeout(() => console.log(this.ctrlname));
+//
+//     //setTimeout(() => this.onCheckboxChange(), 3000);
+//   }
+//
+//   onCheckboxChange(val) {
+//     debugger;
+//   }
+// }
 
 @Component({ selector: 'ion-app' })
-@IonicView({
+@View({
   templateUrl: 'main.html',
-  directives: [formDirectives]
+  directives: [Checkbox, List, Content, NgControlName, NgFormModel]
 })
 class IonicApp {
   constructor() {
-     var fb = new FormBuilder();
-     this.fruitsForm = fb.group({
-       appleCtrl: ['', Validators.required],
-       bananaCtrl: ['', Validators.required],
-       grapeCtrl: ['', Validators.required],
-       cherryCtrl: ['', Validators.required]
-     });
-     debugger;
-  }
+    //  var fb = new FormBuilder();
+    //  this.controls = {
+    //    appleCtrl : ['', Validators.required],
+    //    bananaCtrl: ['', Validators.required],
+    //    grapeCtrl: ['', Validators.required],
+    //    cherryCtrl: ['', Validators.required]
+    //  };
+     //
+    //  this.fruitsForm = fb.group(this.controls);
+    this.fruitsForm = new ControlGroup({
+      "appleCtrl": new Control("APPLE", isChecked),
+      "bananaCtrl": new Control("BANANA", isChecked),
+      "grapeCtrl": new Control("GRAPE", isChecked),
+      "cherryCtrl":  new Control("CHERRY", isChecked)
+    });
+    // this.appleCtrl = new Control("APPLE", isChecked);
+    // this.bananaCtrl = new Control("BANANA", isChecked);
+    // this.grapeCtrl = new Control("GRAPE", isChecked);
+    // this.cherryCtrl = new Control("CHERRY", isChecked);
+
+    function isChecked(ctrl) {
+      if (ctrl.checked) {
+        return null;
+      } else {
+        return {
+          'notChecked': true
+        }
+      }
+    }
+   }
 
   doSubmit(event) {
     console.log('Submitting form', this.fruitsForm.value);
@@ -27,6 +89,7 @@ class IonicApp {
   }
 }
 
+
 export function main(ionicBootstrap) {
   ionicBootstrap(IonicApp);
 }

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

@@ -1,18 +1,18 @@
 <ion-content>
-  <form (^submit)="doSubmit($event)" [control-group]="fruitsForm">
+  <form (^submit)="doSubmit($event)" [ng-form-model]="fruitsForm">
 
     <ion-list>
       <div class="list-header">Some Switches</div>
-      <ion-checkbox control="appleCtrl">
+      <ion-checkbox [ng-control]="appleCtrl">
         Apples
       </ion-checkbox>
-      <ion-checkbox control="bananaCtrl">
+      <ion-checkbox [ng-control]="bananaCtrl">
         Bananas
       </ion-checkbox>
-      <ion-checkbox control="grapeCtrl">
+      <ion-checkbox [ng-control]="grapeCtrl">
         Grapes
       </ion-checkbox>
-      <ion-checkbox control="cherryCtrl">
+      <ion-checkbox [ng-control]="cherryCtrl">
         Cherries
       </ion-checkbox>
     </ion-list>