fix(checkbox): use value accessor provider

Remove the value property and always recommend ngModel or ngControl. Closes #5353
ionic-team · Feb 13, 2016 · e468a21 · e468a21
1 parent 3bb09ce
commit e468a21
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 86 deletions.
diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts
@@ -1,16 +1,21 @@
-import {Component, Optional, Input, HostListener} from 'angular2/core';
-import {NgControl} from 'angular2/common';
+import {Component, Optional, Input, HostListener, Provider, forwardRef, Injector} from 'angular2/core';
+import {NgControl, NG_VALUE_ACCESSOR} from 'angular2/common';
 
 import {Form} from '../../util/form';
 import {Item} from '../item/item';
 import {isTrueProperty} from '../../util/util';
 
+const CHECKBOX_VALUE_ACCESSOR = new Provider(
+    NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => Checkbox), multi: true});
+
+
 /**
  * The checkbox is no different than the HTML checkbox input, except
  * it's styled accordingly to the the platform and design mode, such
  * as iOS or Material Design.
  *
- * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/core/Form-interface.html) for more info on forms and input.
+ * See the [Angular 2 Docs](https://angular.io/docs/ts/latest/guide/forms.html)
+ * for more info on forms and inputs.
  *
  *
  * @usage
@@ -20,17 +25,17 @@ import {isTrueProperty} from '../../util/util';
  *
  *    <ion-item>
  *      <ion-label>Pepperoni</ion-label>
- *      <ion-checkbox value="pepperoni" checked="true"></ion-checkbox>
+ *      <ion-checkbox [(ngModel)]="pepperoni" checked="true"></ion-checkbox>
  *    </ion-item>
  *
  *    <ion-item>
  *      <ion-label>Sausage</ion-label>
- *      <ion-checkbox value="sausage" disabled="true"></ion-checkbox>
+ *      <ion-checkbox [(ngModel)]="sausage" disabled="true"></ion-checkbox>
  *    </ion-item>
  *
  *    <ion-item>
  *      <ion-label>Mushrooms</ion-label>
- *      <ion-checkbox value="mushrooms"></ion-checkbox>
+ *      <ion-checkbox [(ngModel)]="mushrooms"></ion-checkbox>
  *    </ion-item>
  *
  *  </ion-list>
@@ -53,34 +58,27 @@ import {isTrueProperty} from '../../util/util';
     '</button>',
   host: {
     '[class.checkbox-disabled]': '_disabled'
-  }
+  },
+  providers: [CHECKBOX_VALUE_ACCESSOR]
 })
 export class Checkbox {
   private _checked: any = false;
   private _disabled: any = false;
   private _labelId: string;
+  private _fn: Function;
 
   /**
    * @private
    */
   id: string;
 
-  /**
-   * @input {string} the value of the checkbox component
-   */
-  @Input() value: string = '';
-
   constructor(
     private _form: Form,
     @Optional() private _item: Item,
-    @Optional() ngControl: NgControl
+    private _injector: Injector
   ) {
     _form.register(this);
 
-    if (ngControl) {
-      ngControl.valueAccessor = this;
-    }
-
     if (_item) {
       this.id = 'chk-' + _item.registerInput('checkbox');
       this._labelId = 'lbl-' + _item.id;
@@ -90,10 +88,13 @@ export class Checkbox {
 
   /**
    * @private
-   * Toggle the checked state of the checkbox. Calls onChange to pass the updated checked state to the model (Control).
    */
-  toggle() {
-    this.checked = !this.checked;
+  @HostListener('click', ['$event'])
+  private _click(ev) {
+    console.debug('checkbox, checked');
+    ev.preventDefault();
+    ev.stopPropagation();
+    this.onChange(!this._checked);
   }
 
   /**
@@ -105,79 +106,64 @@ export class Checkbox {
   }
 
   set checked(val) {
-    if (!this._disabled) {
-      this._checked = isTrueProperty(val);
-      this.onChange(this._checked);
-      this._item && this._item.setCssClass('item-checkbox-checked', this._checked);
-    }
+    this._setChecked(isTrueProperty(val));
+    this.onChange(this._checked);
   }
 
   /**
-   * @input {boolean} whether or not the checkbox is disabled or not.
+   * @private
    */
-  @Input()
-  get disabled() {
-    return this._disabled;
-  }
-
-  set disabled(val) {
-    this._disabled = isTrueProperty(val);
-    this._item && this._item.setCssClass('item-checkbox-disabled', this._disabled);
+  private _setChecked(isChecked: boolean) {
+    this._checked = isChecked;
+    this._item && this._item.setCssClass('item-checkbox-checked', isChecked);
   }
 
   /**
    * @private
    */
-  @HostListener('click', ['$event'])
-  private _click(ev) {
-    console.debug('checkbox, checked', this.value);
-    ev.preventDefault();
-    ev.stopPropagation();
-    this.toggle();
+  writeValue(val: any) {
+    this._setChecked( isTrueProperty(val) );
   }
 
   /**
    * @private
-   * Angular2 Forms API method called by the model (Control) on change to update
-   * the checked value.
-   * https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L34
    */
-  writeValue(val) {
-    if (val !== null) {
-      this.checked = val;
-    }
+  registerOnChange(fn: Function): void {
+    this._fn = fn;
+    this.onChange = (isChecked: boolean) => {
+      console.debug('checkbox, onChange', isChecked);
+      fn(isChecked);
+      this._setChecked(isChecked);
+    };
   }
 
   /**
    * @private
    */
-  onChange(val) {
-    // TODO: figure the whys and the becauses
-  }
+  registerOnTouched(fn) { this.onTouched = fn; }
 
   /**
-   * @private
+   * @input {boolean} whether or not the checkbox is disabled or not.
    */
-  onTouched(val) {
-    // TODO: figure the whys and the becauses
+  @Input()
+  get disabled(): any {
+    return this._disabled;
+  }
+
+  set disabled(val: any) {
+    this._disabled = isTrueProperty(val);
+    this._item && this._item.setCssClass('item-checkbox-disabled', this._disabled);
   }
 
   /**
    * @private
-   * Angular2 Forms API method called by the view (NgControl) to register the
-   * onChange event handler that updates the model (Control).
-   * https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L27
-   * @param {function} fn  the onChange event handler.
    */
-  registerOnChange(fn) { this.onChange = fn; }
+  onChange(_) {}
 
   /**
    * @private
-   * Angular2 Forms API method called by the the view (NgControl) to register
-   * the onTouched event handler that marks model (Control) as touched.
-   * @param {function} fn  onTouched event handler.
    */
-  registerOnTouched(fn) { this.onTouched = fn; }
+  onTouched() {}
 
   /**
    * @private

diff --git a/ionic/components/checkbox/test/basic/index.ts b/ionic/components/checkbox/test/basic/index.ts
@@ -16,6 +16,14 @@ import {
   templateUrl: 'main.html'
 })
 class E2EApp {
+  fruitsForm: ControlGroup;
+  grapeDisabled: boolean;
+  grapeChecked: boolean;
+  kiwiModel: boolean;
+  strawberryModel: boolean;
+  standAloneChecked: boolean;
+  formResults: string;
+
   constructor() {
     this.fruitsForm = new ControlGroup({
       "appleCtrl": new Control(),
@@ -27,6 +35,9 @@ class E2EApp {
     this.grapeDisabled = true;
     this.grapeChecked = true;
     this.standAloneChecked = true;
+
+    this.kiwiModel = false;
+    this.strawberryModel = true;
   }
 
   toggleGrapeChecked() {

diff --git a/ionic/components/checkbox/test/basic/main.html b/ionic/components/checkbox/test/basic/main.html
@@ -9,33 +9,33 @@
     <ion-list>
 
       <ion-item>
-        <ion-label>Apple, value=apple, init checked</ion-label>
-        <ion-checkbox value="apple" checked="true" ngControl="appleCtrl"></ion-checkbox>
+        <ion-label>Apple, ngControl</ion-label>
+        <ion-checkbox ngControl="appleCtrl"></ion-checkbox>
       </ion-item>
 
       <ion-item>
-        <ion-label>Banana, init no checked/value attributes</ion-label>
+        <ion-label>Banana, ngControl</ion-label>
         <ion-checkbox ngControl="bananaCtrl"></ion-checkbox>
       </ion-item>
 
       <ion-item>
-        <ion-label>Cherry, value=cherry, init disabled</ion-label>
-        <ion-checkbox value="cherry" disabled="true" ngControl="cherryCtrl"></ion-checkbox>
+        <ion-label>Cherry, ngControl, disabled</ion-label>
+        <ion-checkbox disabled="true" ngControl="cherryCtrl"></ion-checkbox>
       </ion-item>
 
       <ion-item>
-        <ion-label>Grape, value=grape, init checked, disabled</ion-label>
-        <ion-checkbox value="grape" [checked]="grapeChecked" [disabled]="grapeDisabled" ngControl="grapeCtrl"></ion-checkbox>
+        <ion-label>Grape, ngControl, checked, disabled</ion-label>
+        <ion-checkbox [checked]="grapeChecked" [disabled]="grapeDisabled" ngControl="grapeCtrl"></ion-checkbox>
       </ion-item>
 
       <ion-item>
-        <ion-label>secondary color</ion-label>
-        <ion-checkbox secondary checked="false"></ion-checkbox>
+        <ion-label>Kiwi, NgModel false, Secondary color</ion-label>
+        <ion-checkbox secondary [(ngModel)]="kiwiModel"></ion-checkbox>
       </ion-item>
 
       <ion-item>
-        <ion-label>light color</ion-label>
-        <ion-checkbox light checked></ion-checkbox>
+        <ion-label>Strawberry, NgModel true</ion-label>
+        <ion-checkbox light [(ngModel)]="strawberryModel"></ion-checkbox>
       </ion-item>
 
     </ion-list>
@@ -62,6 +62,8 @@
     <code>cherry.value: {{fruitsForm.controls.cherryCtrl.value}}</code><br>
     <code>grape.dirty: {{fruitsForm.controls.grapeCtrl.dirty}}</code><br>
     <code>grape.value: {{fruitsForm.controls.grapeCtrl.value}}</code><br>
+    <code>kiwiModel: {{kiwiModel}}</code><br>
+    <code>strawberryModel: {{strawberryModel}}</code><br>
   </p>
 
   <pre aria-hidden="true" padding>{{formResults}}</pre>

diff --git a/ionic/components/toggle/test/basic/index.ts b/ionic/components/toggle/test/basic/index.ts
@@ -17,6 +17,7 @@ import {
 class E2EApp {
   fruitsForm: ControlGroup;
   grapeDisabled: boolean;
+  grapeChecked: boolean;
   kiwiModel: boolean;
   strawberryModel: boolean;
   formResults: string;
@@ -29,14 +30,15 @@ class E2EApp {
       "grapeCtrl": new Control(true)
     });
 
+    this.grapeChecked = true;
     this.grapeDisabled = true;
 
     this.kiwiModel = false;
     this.strawberryModel = true;
   }
 
   toggleGrapeChecked() {
-    this.fruitsForm.controls['grapeCtrl'].updateValue( !this.fruitsForm.controls['grapeCtrl'].value )
+    this.grapeChecked = !this.grapeChecked;
   }
 
   toggleGrapeDisabled() {

diff --git a/ionic/components/toggle/test/basic/main.html b/ionic/components/toggle/test/basic/main.html
@@ -24,7 +24,7 @@
 
       <ion-item>
         <ion-label>Grape, ngControl, checked, disabled</ion-label>
-        <ion-toggle [disabled]="grapeDisabled" ngControl="grapeCtrl"></ion-toggle>
+        <ion-toggle [checked]="grapeChecked" [disabled]="grapeDisabled" ngControl="grapeCtrl"></ion-toggle>
       </ion-item>
 
       <ion-item>

diff --git a/ionic/components/toggle/toggle.ts b/ionic/components/toggle/toggle.ts
@@ -20,7 +20,7 @@ const TOGGLE_VALUE_ACCESSOR = new Provider(
  * attribute.
  *
  * See the [Angular 2 Docs](https://angular.io/docs/ts/latest/guide/forms.html)
- * for more info on forms and input.
+ * for more info on forms and inputs.
  * @property {boolean} [checked] - whether the toggle it toggled or not
  * @property {boolean} [disabled] - whether the toggle is disabled or not
  *
@@ -36,7 +36,7 @@ const TOGGLE_VALUE_ACCESSOR = new Provider(
  *
  *    <ion-item>
  *      <ion-label>Sausage</ion-label>
- *      <ion-toggle [(ngModel)]="sausage"></ion-toggle>
+ *      <ion-toggle [(ngModel)]="sausage" disabled="true"></ion-toggle>
  *    </ion-item>
  *
  *    <ion-item>
@@ -180,6 +180,14 @@ export class Toggle implements ControlValueAccessor  {
     this.onChange(this._checked);
   }
 
+  /**
+   * @private
+   */
+  private _setChecked(isChecked: boolean) {
+    this._checked = isChecked;
+    this._item && this._item.setCssClass('item-toggle-checked', isChecked);
+  }
+
   /**
    * @private
    */
@@ -202,10 +210,7 @@ export class Toggle implements ControlValueAccessor  {
   /**
    * @private
    */
-  private _setChecked(isChecked: boolean) {
-    this._checked = isChecked;
-    this._item && this._item.setCssClass('item-toggle-checked', isChecked);
-  }
+  registerOnTouched(fn) { this.onTouched = fn; }
 
   @Input()
   get disabled(): any {
@@ -217,11 +222,6 @@ export class Toggle implements ControlValueAccessor  {
     this._item && this._item.setCssClass('item-toggle-disabled', this._disabled);
   }
 
-  /**
-   * @private
-   */
-  registerOnTouched(fn) { this.onTouched = fn; }
-
   /**
    * @private
    */