From 4bf716528e3161d7703206368d747670a3a19632 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 6 Jan 2016 15:27:51 -0600 Subject: [PATCH] fix(radio): fix onChange error --- ionic/components/checkbox/checkbox.ts | 16 +++++-------- ionic/components/radio/radio.ts | 34 +++++++++++++++------------ ionic/components/toggle/toggle.ts | 14 +++++------ 3 files changed, 31 insertions(+), 33 deletions(-) diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts index 9f8adcf42d..52c97f7fe3 100644 --- a/ionic/components/checkbox/checkbox.ts +++ b/ionic/components/checkbox/checkbox.ts @@ -1,4 +1,4 @@ -import {Component, Directive, Optional, ElementRef, Renderer, HostListener} from 'angular2/core'; +import {Component, Directive, Optional, ElementRef, Input, Renderer, HostListener} from 'angular2/core'; import {NgControl} from 'angular2/common'; import {Ion} from '../ion'; @@ -24,16 +24,10 @@ import {Form} from '../../util/form'; */ @Component({ selector: 'ion-checkbox', - inputs: [ - 'value', - 'checked', - 'disabled', - 'id' - ], host: { 'role': 'checkbox', - 'tappable': '', 'class': 'item', + 'tappable': '', 'tabindex': 0, '[attr.aria-disabled]': 'disabled' }, @@ -48,6 +42,10 @@ import {Form} from '../../util/form'; '' }) export class Checkbox { + @Input() value: string = ''; + @Input() public checked: any = false; + @Input() disabled: boolean = false; + @Input() id: string; constructor( private _form: Form, @@ -98,8 +96,6 @@ export class Checkbox { /** * @private - * Click event handler to toggle the checkbox checked state. - * @param {MouseEvent} ev The click event. */ @HostListener('click', ['$event']) _click(ev) { diff --git a/ionic/components/radio/radio.ts b/ionic/components/radio/radio.ts index 04b3da4301..98f09afb80 100644 --- a/ionic/components/radio/radio.ts +++ b/ionic/components/radio/radio.ts @@ -26,13 +26,11 @@ import {isDefined} from '../../util/util'; @Component({ selector: 'ion-radio', host: { - '[attr.id]': 'id', - '[attr.aria-disabled]': 'disabled', - '[attr.aria-labelledby]': 'labelId', - 'class': 'item', 'role': 'radio', + 'class': 'item', 'tappable': '', - 'tabindex': '0' + 'tabindex': 0, + '[attr.aria-disabled]': 'disabled' }, template: '
' + @@ -53,10 +51,11 @@ export class RadioButton { labelId: any; - constructor(private _form: Form, private _renderer: Renderer, private _elementRef: ElementRef) { - this._renderer = _renderer; - this._elementRef = _elementRef; - } + constructor( + private _form: Form, + private _renderer: Renderer, + private _elementRef: ElementRef + ) {} /** * @private @@ -64,8 +63,10 @@ export class RadioButton { ngOnInit() { if (!this.id) { this.id = 'rb-' + this._form.nextId(); + this._renderer.setElementAttribute(this._elementRef, 'id', this.id); } this.labelId = 'lbl-' + this.id; + this._renderer.setElementAttribute(this._elementRef, 'aria-labelledby', this.labelId); let checked = this.checked; if (typeof checked === 'string') { @@ -78,8 +79,8 @@ export class RadioButton { /** * @private */ - @HostListener('click', ['$event']) - private onClick(ev) { + @HostListener('click') + private _click() { console.debug('RadioButton, select', this.value); this.select.emit(this); } @@ -151,12 +152,15 @@ export class RadioGroup { id: any; value: any; - constructor(@Optional() private ngControl: NgControl, private _renderer: Renderer, private _elementRef: ElementRef) { - this.ngControl = ngControl; + constructor( + @Optional() ngControl: NgControl, + private _renderer: Renderer, + private _elementRef: ElementRef + ) { this.id = ++radioGroupIds; if (ngControl) { - this.ngControl.valueAccessor = this; + ngControl.valueAccessor = this; } } @@ -225,7 +229,7 @@ export class RadioGroup { button.isChecked = isChecked; if (isChecked) { this.writeValue(button.value); - this.onChange(button.value); + //this.onChange(button.value); this._renderer.setElementAttribute(this._elementRef, 'aria-activedescendant', button.id); } } diff --git a/ionic/components/toggle/toggle.ts b/ionic/components/toggle/toggle.ts index 54dcc8d725..2d1eb75b5a 100644 --- a/ionic/components/toggle/toggle.ts +++ b/ionic/components/toggle/toggle.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, Renderer, HostListener, Optional} from 'angular2/core'; +import {Component, ElementRef, Renderer, Input, HostListener, Optional} from 'angular2/core'; import {NgControl} from 'angular2/common'; import {Form} from '../../util/form'; @@ -46,16 +46,10 @@ import {pointerCoord} from '../../util/dom'; */ @Component({ selector: 'ion-toggle,ion-switch', - inputs: [ - 'value', - 'checked', - 'disabled', - 'id' - ], host: { 'role': 'checkbox', - 'tappable': '', 'class': 'item', + 'tappable': '', 'tabindex': 0, '[attr.aria-disabled]': 'disabled', '(touchstart)': 'pointerDown($event)', @@ -75,6 +69,10 @@ import {pointerCoord} from '../../util/dom'; `
` }) export class Toggle { + @Input() value: string = ''; + @Input() public checked: any = false; + @Input() disabled: boolean = false; + @Input() id: string; constructor( private _form: Form,