checkbox and radio

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

@@ -1,4 +1,16 @@
 import {App} from 'ionic/ionic';
+import {
+  Control,
+  ControlGroup,
+  NgForm,
+  formDirectives,
+  Validators,
+  NgControl,
+  ControlValueAccessor,
+  NgControlName,
+  NgFormModel,
+  FormBuilder
+} from 'angular2/forms';
 
 
 @App({
@@ -6,9 +18,33 @@ import {App} from 'ionic/ionic';
 })
 class IonicApp {
   constructor() {
-    // var fb = new FormBuilder();
-    // this.form = fb.group({
-    //   preferredApple: ['mac', Validators.required],
-    // });
+    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.fruitsForm = new ControlGroup({
+      "fruitGroup1": this.fruitsGroup1,
+      "fruitGroup2": this.fruitsGroup2
+    });
+
+    function isChecked(ctrl) {
+      if (ctrl.checked) {
+        return null;
+      } else {
+        return {
+          'notChecked': true
+        }
+      }
+    }
+  }
+
+  doSubmit(event) {
+    console.log('Submitting form', this.fruitsForm.value);
+    event.preventDefault();
   }
 }

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

@@ -3,33 +3,28 @@
 
   <ion-content>
 
-    <form (^submit)="doSubmit($event)" [control-group]="form">
+    <form (^submit)="doSubmit($event)" [ng-form-model]="fruitsForm">
       <div class="list-header">
-        Radio Group
+        Fruit Group 1
       </div>
 
-      <ion-radio-group control="preferredApple">
-
-        <ion-radio value="mac">
-          McIntosh
-        </ion-radio>
-
-        <ion-radio value="granny">
-          Granny Smith
-        </ion-radio>
-
-        <ion-radio value="gala">
-          Gala
-        </ion-radio>
-
-        <ion-radio value="fuji">
-          Fuji
-        </ion-radio>
-
+      <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>
 
+      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>
+
+
     </form>
 
-    Current apple: <b>{{form.controls.preferredApple.value}}</b>
   </ion-content>
 </ion-view>