fix(radio): add ability to set ng-model on a radio group and check the corresponding radio button with that value

added a test for ng-model with a radio. references #530

ionic/components/radio/radio.ts

@@ -60,13 +60,13 @@ export class RadioGroup extends Ion {
     @Query(ListHeader) private headerQuery: QueryList<ListHeader>
   ) {
     super(elementRef, config);
-
+    this.ngControl = ngControl;
     this.id = ++radioGroupIds;
     this.radioIds = -1;
     this.onChange = (_) => {};
     this.onTouched = (_) => {};
 
-    if (ngControl) ngControl.valueAccessor = this;
+    if (ngControl) this.ngControl.valueAccessor = this;
   }
 
   /**
@@ -91,6 +91,11 @@ export class RadioGroup extends Ion {
     radio.id = radio.id || ('radio-' + this.id + '-' + (++this.radioIds));
     this.radios.push(radio);
 
+    console.log("Radio", radio.id, radio.value, radio.checked);
+    if (this.value == radio.value) {
+      radio.check(this.value);
+    }
+
     if (radio.checked) {
       this.value = radio.value;
       this.activeId = radio.id;
@@ -213,9 +218,9 @@ export class RadioButton extends Ion {
   /**
    * @private
    */
-  click(ev) {
-    ev.preventDefault();
-    ev.stopPropagation();
+  click(event) {
+    event.preventDefault();
+    event.stopPropagation();
     this.check();
   }
 

ionic/components/radio/test/basic/index.ts

@@ -22,6 +22,18 @@ class E2EApp {
     this.fruitsForm = new ControlGroup({
       "fruits": this.fruits
     });
+
+    this.currenciesControl = new Control("");
+
+    this.currencyForm = new ControlGroup({
+      "currenciesControl": this.currenciesControl
+    });
+
+    this.currencies = ['USD', 'EUR'];
+    this.selectedCurrency = 'EUR';
+
+    this.relationship = 'friends';
+
   }
 
   setApple() {

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

@@ -32,15 +32,37 @@
 
   </form>
 
-  <p aria-hidden="true" class="align-center">
+  <div aria-hidden="true" class="align-center">
     <button (click)="setApple()" outline small>Select Apple</button>
     <button (click)="setBanana()" outline small>Select Banana</button>
     <button class="e2eCherry" (click)="setCherry()" outline small>Select Cherry</button>
-  </p>
+  </div>
 
-  <p>
+  <div padding>
     <code>fruits.dirty: {{fruitsForm.controls.fruits.dirty}}</code><br>
     <code>fruits.value: {{fruitsForm.controls.fruits.value}}</code><br>
-  </p>
+  </div>
+
+  <form (submit)="doSubmit($event)" [ng-form-model]="currencyForm">
+    <ion-radio-group ng-control="currenciesControl">
+      <ion-list-header>
+        Currencies
+      </ion-list-header>
+      <ion-radio *ng-for="#currency of currencies" [checked]="currency==selectedCurrency" [value]="currency">{{currency}}</ion-radio>
+    </ion-radio-group>
+  </form>
+
+  <div padding>
+    <code>currenciesControl.value: {{currencyForm.controls.currenciesControl.value}}</code>
+  </div>
+
+  <ion-radio-group [(ng-model)]="relationship">
+    <ion-radio value="friends">Friends</ion-radio>
+    <ion-radio value="enemies">Enemies</ion-radio>
+  </ion-radio-group>
+
+  <div padding>
+    <code>relationship: {{relationship}}</code>
+  </div>
 
 </ion-content>