javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 05:21:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(checkbox): use value accessor provider

Browse Source 
Remove the value property and always recommend ngModel or ngControl.
Closes #5353
This commit is contained in:
Adam Bradley
2016-02-13 01:35:38 -06:00
parent 3bb09cee07
commit e468a21139
6 changed files with 98 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
ionic/components/checkbox/checkbox.ts
View File

@ -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,22 +106,51 @@ export class Checkbox {
}
set checked(val) {
if (!this._disabled) {
this._checked = isTrueProperty(val);
this._setChecked(isTrueProperty(val));
this.onChange(this._checked);
this._item && this._item.setCssClass('item-checkbox-checked', this._checked);
}
/**
* @private
*/
private _setChecked(isChecked: boolean) {
this._checked = isChecked;
this._item && this._item.setCssClass('item-checkbox-checked', isChecked);
}
/**
* @private
*/
writeValue(val: any) {
this._setChecked( isTrueProperty(val) );
}
/**
* @private
*/
registerOnChange(fn: Function): void {
this._fn = fn;
this.onChange = (isChecked: boolean) => {
console.debug('checkbox, onChange', isChecked);
fn(isChecked);
this._setChecked(isChecked);
};
}
/**
* @private
*/
registerOnTouched(fn) { this.onTouched = fn; }
/**
* @input {boolean} whether or not the checkbox is disabled or not.
*/
@Input()
get disabled() {
get disabled(): any {
return this._disabled;
}
set disabled(val) {
set disabled(val: any) {
this._disabled = isTrueProperty(val);
this._item && this._item.setCssClass('item-checkbox-disabled', this._disabled);
}
@ -128,56 +158,12 @@ export class Checkbox {
/**
* @private
*/
@HostListener('click', ['$event'])
private _click(ev) {
console.debug('checkbox, checked', this.value);
ev.preventDefault();
ev.stopPropagation();
this.toggle();
}
/**
* @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;
}
}
onChange(_) {}
/**
* @private
*/
onChange(val) {
// TODO: figure the whys and the becauses
}
/**
* @private
*/
onTouched(val) {
// TODO: figure the whys and the becauses
}
/**
* @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; }
/**
* @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

11
ionic/components/checkbox/test/basic/index.ts
View File

@ -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() {

24
ionic/components/checkbox/test/basic/main.html
View File

@ -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>

4
ionic/components/toggle/test/basic/index.ts
View File

@ -17,6 +17,7 @@ import {
class E2EApp {
fruitsForm: ControlGroup;
grapeDisabled: boolean;
grapeChecked: boolean;
kiwiModel: boolean;
strawberryModel: boolean;
formResults: string;
@ -29,6 +30,7 @@ class E2EApp {
"grapeCtrl": new Control(true)
});
this.grapeChecked = true;
this.grapeDisabled = true;
this.kiwiModel = false;
@ -36,7 +38,7 @@ class E2EApp {
}
toggleGrapeChecked() {
this.fruitsForm.controls['grapeCtrl'].updateValue( !this.fruitsForm.controls['grapeCtrl'].value )
this.grapeChecked = !this.grapeChecked;
}
toggleGrapeDisabled() {

2
ionic/components/toggle/test/basic/main.html
View File

@ -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>

22
ionic/components/toggle/toggle.ts
View File

@ -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
*/