radio

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

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);
   }

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<RadioButton> = [];
 
   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);
   }
 }

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

ionic/components/radio/test/basic/main.html

@@ -5,26 +5,20 @@
 
     <form (^submit)="doSubmit($event)" [ng-form-model]="fruitsForm">
       <div class="list-header">
-        Fruit Group 1
+        Fruits
       </div>
 
-      <ion-radio-group ng-control-group="fruitGroup1">
-        <ion-radio><label>APPLE</label><input #apple type="radio" ng-control="appleCtrl"></ion-radio>
-        <ion-radio><label>BANANA</label><input #banana type="radio" ng-control="bananaCtrl"></ion-radio>
+      <ion-radio-group ng-control="fruits">
+        <ion-radio><label>APPLE</label><input value="apple" type="radio"></ion-radio>
+        <ion-radio><label>BANANA</label><input value="banana" type="radio"></ion-radio>
+        <ion-radio><label>CHERRY</label><input value="cherry" type="radio"></ion-radio>
       </ion-radio-group>
 
-      appleCtrl.dirty: {{fruitsForm.controls.fruitGroup1.controls.appleCtrl.dirty}}<br>
-
-      <div class="list-header">
-        Fruit Group 2
-      </div>
-      <ion-radio-group ng-control-group="fruitGroup2">
-        <ion-radio><label>GRAPE</label><input #grape name="test" type="radio" ng-control="grapeCtrl"></ion-radio>
-        <ion-radio><label>CHERRY</label><input #cherry name="test" type="radio" ng-control="cherryCtrl"></ion-radio>
-      </ion-radio-group>
-
-
+      fruits.dirty: {{fruitsForm.controls.fruits.dirty}}<br>
+      fruits.value: {{fruitsForm.controls.fruits.value}}<br>
     </form>
-
+    <button (click)="setApple()">Select Apple</button>
+    <button (click)="setBanana()">Select Banana</button>
+    <button (click)="setCherry()">Select Cherry</button>
   </ion-content>
 </ion-view>