javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 04:53:58 +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

132
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.onChange(this._checked);
this._item && this._item.setCssClass('item-checkbox-checked', this._checked);
}
this._setChecked(isTrueProperty(val));
this.onChange(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