diff --git a/ionic/components/checkbox/checkbox.js b/ionic/components/checkbox/checkbox.js
index 299d7a18d0..b4537d4628 100644
--- a/ionic/components/checkbox/checkbox.js
+++ b/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; }
+
}
diff --git a/ionic/components/checkbox/test/basic/index.js b/ionic/components/checkbox/test/basic/index.js
index 788449378a..e176eed8f9 100644
--- a/ionic/components/checkbox/test/basic/index.js
+++ b/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: `
+// {{ctrlname}}
+// `,
+// 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);
}
diff --git a/ionic/components/checkbox/test/basic/main.html b/ionic/components/checkbox/test/basic/main.html
index d44b8e168a..2915588fca 100644
--- a/ionic/components/checkbox/test/basic/main.html
+++ b/ionic/components/checkbox/test/basic/main.html
@@ -1,18 +1,18 @@
-