fix(toggle): use value accessor provider

Remove the value property and always recommend ngModel or ngControl. Closes #5425
ionic-team · Feb 13, 2016 · 5034c1d · 5034c1d
1 parent dafa400
commit 5034c1d
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 111 deletions.
diff --git a/ionic/components/toggle/test/basic/index.ts b/ionic/components/toggle/test/basic/index.ts
@@ -15,6 +15,12 @@ import {
   templateUrl: 'main.html'
 })
 class E2EApp {
+  fruitsForm: ControlGroup;
+  grapeDisabled: boolean;
+  kiwiModel: boolean;
+  strawberryModel: boolean;
+  formResults: string;
+
   constructor() {
     this.fruitsForm = new ControlGroup({
       "appleCtrl": new Control(),
@@ -24,13 +30,13 @@ class E2EApp {
     });
 
     this.grapeDisabled = true;
-    this.grapeChecked = true;
 
-    this.myModel = true;
+    this.kiwiModel = false;
+    this.strawberryModel = true;
   }
 
   toggleGrapeChecked() {
-    this.grapeChecked = !this.grapeChecked;
+    this.fruitsForm.controls['grapeCtrl'].updateValue( !this.fruitsForm.controls['grapeCtrl'].value )
   }
 
   toggleGrapeDisabled() {

diff --git a/ionic/components/toggle/test/basic/main.html b/ionic/components/toggle/test/basic/main.html
@@ -1,41 +1,40 @@
 
 <ion-toolbar><ion-title>Toggles</ion-title></ion-toolbar>
 
-
 <ion-content>
 
   <form (submit)="doSubmit($event)" [ngFormModel]="fruitsForm">
 
     <ion-list>
 
       <ion-item>
-        <ion-label>Apple, value=apple, init checked</ion-label>
-        <ion-toggle value="apple" checked="true" ngControl="appleCtrl"></ion-toggle>
+        <ion-label>Apple, ngControl</ion-label>
+        <ion-toggle ngControl="appleCtrl"></ion-toggle>
       </ion-item>
 
       <ion-item>
-        <ion-label>Banana, init no checked/value attributes</ion-label>
+        <ion-label>Banana, ngControl</ion-label>
         <ion-toggle ngControl="bananaCtrl"></ion-toggle>
       </ion-item>
 
       <ion-item>
-        <ion-label>Cherry, value=cherry, init disabled</ion-label>
-        <ion-toggle value="cherry" disabled="true" ngControl="cherryCtrl"></ion-toggle>
+        <ion-label>Cherry, ngControl, disabled</ion-label>
+        <ion-toggle disabled="true" ngControl="cherryCtrl"></ion-toggle>
       </ion-item>
 
       <ion-item>
-        <ion-label>Grape, value=grape, init checked, disabled</ion-label>
-        <ion-toggle value="grape" [checked]="grapeChecked" [disabled]="grapeDisabled" ngControl="grapeCtrl"></ion-toggle>
+        <ion-label>Grape, ngControl, checked, disabled</ion-label>
+        <ion-toggle [disabled]="grapeDisabled" ngControl="grapeCtrl"></ion-toggle>
       </ion-item>
 
       <ion-item>
-        <ion-label>Secondary color</ion-label>
-        <ion-toggle secondary checked="true"></ion-toggle>
+        <ion-label>Kiwi, NgModel false, Secondary color</ion-label>
+        <ion-toggle secondary [(ngModel)]="kiwiModel"></ion-toggle>
       </ion-item>
 
       <ion-item>
-        <ion-label>I'm an NgModel</ion-label>
-        <ion-toggle value="apple" checked="true" [(ngModel)]="myModel"></ion-toggle>
+        <ion-label>Strawberry, NgModel true</ion-label>
+        <ion-toggle [(ngModel)]="strawberryModel"></ion-toggle>
       </ion-item>
 
     </ion-list>
@@ -57,7 +56,8 @@
     <code>cherry.value: {{fruitsForm.controls.cherryCtrl.value}}</code><br>
     <code>grape.dirty: {{fruitsForm.controls.grapeCtrl.dirty}}</code><br>
     <code>grape.value: {{fruitsForm.controls.grapeCtrl.value}}</code><br>
-    <code>ngModel.value: {{myModel}}</code><br>
+    <code>kiwiModel: {{kiwiModel}}</code><br>
+    <code>strawberryModel: {{strawberryModel}}</code><br>
   </p>
 
   <pre aria-hidden="true" padding>{{formResults}}</pre>