From 57438267c5dfa37ca05bf50dabecba99c4d58b2b Mon Sep 17 00:00:00 2001 From: Tim Lancina Date: Thu, 23 Jul 2015 16:53:20 -0400 Subject: [PATCH] radio --- ionic/components/form/label.ts | 2 +- ionic/components/form/tap-input.ts | 5 +- ionic/components/radio/radio.ts | 62 +++++++++++---------- ionic/components/radio/test/basic/index.ts | 32 +++++------ ionic/components/radio/test/basic/main.html | 26 ++++----- 5 files changed, 62 insertions(+), 65 deletions(-) diff --git a/ionic/components/form/label.ts b/ionic/components/form/label.ts index 1b18c06bda..09318e8681 100644 --- a/ionic/components/form/label.ts +++ b/ionic/components/form/label.ts @@ -33,7 +33,7 @@ export class Label { } this.scrollAssist = config.setting('keyboardScrollAssist'); - this.scrollAssist = true; + this.scrollAssist = true; //TODO get rid of this } pointerStart(ev) { diff --git a/ionic/components/form/tap-input.ts b/ionic/components/form/tap-input.ts index e040237f4b..c3b8476fdf 100644 --- a/ionic/components/form/tap-input.ts +++ b/ionic/components/form/tap-input.ts @@ -10,9 +10,10 @@ import {RadioButton} from '../radio/radio'; @Directive({ selector: 'input[type=checkbox],input[type=radio]', - properties: [ 'checked', 'name' ], + properties: [ 'checked', 'name', 'value' ], host: { '[checked]': 'checked', + '[value]': 'value', '[attr.name]': 'name', '(change)': 'onChangeEvent($event)' } @@ -41,6 +42,8 @@ export class TapInput extends IonInput { this.tabIndex = this.tabIndex || ''; } + //to detect switching/selecting inputs with the keyboard + //view -> model (Control) onChangeEvent(ev) { this.container && this.container.onChangeEvent(this); } diff --git a/ionic/components/radio/radio.ts b/ionic/components/radio/radio.ts index bfda4edde6..3c011c8a06 100644 --- a/ionic/components/radio/radio.ts +++ b/ionic/components/radio/radio.ts @@ -1,4 +1,4 @@ -import {ElementRef, Ancestor} from 'angular2/angular2'; +import {ElementRef, Ancestor, NgControl, Renderer} from 'angular2/angular2'; import {IonicDirective, IonicComponent, IonicView} from '../../config/annotations'; import {IonicConfig} from '../../config/config'; @@ -19,10 +19,20 @@ export class RadioGroup extends Ion { buttons: Array = []; constructor( + cd: NgControl, + renderer: Renderer, elementRef: ElementRef, ionicConfig: IonicConfig ) { super(elementRef, ionicConfig); + this.onChange = (_) => {}; + this.onTouched = (_) => {}; + this.renderer = renderer; + this.elementRef = elementRef; + + cd.valueAccessor = this; + + this.value = ""; this.list = true; } @@ -32,17 +42,29 @@ export class RadioGroup extends Ion { if (!inputEl.hasAttribute('name')) { radioButton.input.name = this._name; } - // if (radioButton && !radioButton.hasAttribute('name')){ - // radioButton.setAttribute('name', this._name); - // } } update(input) { for (let button of this.buttons) { - button.input.checked = button.input.elementRef.nativeElement.checked; + button.input.checked = false; + } + input.checked = true; + this.onChange(input.value); + } + + // Called by the model (Control) to update the view + writeValue(value) { + this.value = value; + for (let button of this.buttons) { + button.input.checked = button.input.value == value; } } + // Used by the view to update the model (Control) + // Up to us to call it in update() + registerOnChange(fn) { this.onChange = fn; } + + registerOnTouched(fn) { this.onTouched = fn; } } @IonicComponent({ @@ -51,7 +73,6 @@ export class RadioGroup extends Ion { '[class.item]': 'item', '[class.active]': 'input.checked', '[attr.aria-checked]': 'input.checked', - // '(^click)': 'onClick($event)' }, defaultProperties: { 'iconOff': 'ion-ios-circle-outline', @@ -84,30 +105,15 @@ export class RadioButton extends IonInputItem { this.group.registerButton(this); } - // onClick(ev) { - // // switching between radio buttons with arrow keys fires a MouseEvent - // if (ev.target.tagName === "INPUT") return; - // this.input.checked = !this.input.checked; - // - // //let bindings update first - // setTimeout(() => this.group.update(this.input)); - // - // //TODO figure out a way to trigger change on the actual input to trigger - // // form updates - // - // // this._checkbox.dispatchEvent(e); - // //this._checkboxDir.control.valueAccessor.writeValue(val); - // } - + //from clicking the label + //view -> model (Control) focus() { - let mouseClick = new MouseEvent("click", { - bubbles: true, - cancelable: true, - }); - this.input && this.input.elementRef.nativeElement.dispatchEvent(mouseClick); + this.group.update(this.input); } - onChangeEvent(input) { - this.group.update(input); + //from switching inputs with the keyboard + //view -> model (Control) + onChangeEvent() { + this.group.update(this.input); } } diff --git a/ionic/components/radio/test/basic/index.ts b/ionic/components/radio/test/basic/index.ts index a411aece0d..edcc2b001b 100644 --- a/ionic/components/radio/test/basic/index.ts +++ b/ionic/components/radio/test/basic/index.ts @@ -18,29 +18,23 @@ import { }) class IonicApp { constructor() { - this.fruitsGroup1 = new ControlGroup({ - "appleCtrl": new Control("", isChecked), - "bananaCtrl": new Control("", isChecked) - }); - this.fruitsGroup2 = new ControlGroup({ - "grapeCtrl": new Control("", isChecked), - "cherryCtrl": new Control("", isChecked) - }); + this.fruits = new Control(""); this.fruitsForm = new ControlGroup({ - "fruitGroup1": this.fruitsGroup1, - "fruitGroup2": this.fruitsGroup2 + "fruits": this.fruits }); + } - function isChecked(ctrl) { - if (ctrl.checked) { - return null; - } else { - return { - 'notChecked': true - } - } - } + setApple() { + this.fruits.updateValue("apple"); + } + + setBanana() { + this.fruits.updateValue("banana"); + } + + setCherry() { + this.fruits.updateValue("cherry"); } doSubmit(event) { diff --git a/ionic/components/radio/test/basic/main.html b/ionic/components/radio/test/basic/main.html index f6c4df4efb..adcbcd26e6 100644 --- a/ionic/components/radio/test/basic/main.html +++ b/ionic/components/radio/test/basic/main.html @@ -5,26 +5,20 @@
- Fruit Group 1 + Fruits
- - - + + + + - appleCtrl.dirty: {{fruitsForm.controls.fruitGroup1.controls.appleCtrl.dirty}}
- -
- Fruit Group 2 -
- - - - - - + fruits.dirty: {{fruitsForm.controls.fruits.dirty}}
+ fruits.value: {{fruitsForm.controls.fruits.value}}
- + + +