fix(toggle): set disabled state from FormControl

src/components/toggle/test/basic/app-module.ts

@@ -15,8 +15,8 @@ export class E2EPage {
 
   appleCtrl = new FormControl(false);
   bananaCtrl = new FormControl(true);
-  cherryCtrl = new FormControl(false);
-  grapeCtrl = new FormControl(true);
+  cherryCtrl = new FormControl({value: false, disabled: true});
+  grapeCtrl = new FormControl({value: true, disabled: true});
 
   fruitsForm = new FormGroup({
     'apple': this.appleCtrl,
@@ -35,7 +35,7 @@ export class E2EPage {
   }
 
   toggleGrapeDisabled() {
-    this.grapeDisabled = !this.grapeDisabled;
+    this.grapeCtrl.enabled ? this.grapeCtrl.disable() : this.grapeCtrl.enable();
   }
 
   appleChange(toggle: Toggle) {

src/components/toggle/test/basic/main.html

@@ -35,12 +35,12 @@
 
       <ion-item>
         <ion-label>Cherry, formControlName, disabled</ion-label>
-        <ion-toggle disabled="true" formControlName="cherry"></ion-toggle>
+        <ion-toggle formControlName="cherry"></ion-toggle>
       </ion-item>
 
       <ion-item>
         <ion-label>Grape, formControlName, checked, disabled</ion-label>
-        <ion-toggle [checked]="grapeChecked" [disabled]="grapeDisabled" formControlName="grape"></ion-toggle>
+        <ion-toggle [checked]="grapeChecked" formControlName="grape"></ion-toggle>
       </ion-item>
 
       <ion-item>
@@ -53,6 +53,11 @@
         <ion-toggle color="danger" (ionChange)="strawberryChange($event)" [checked]="true"></ion-toggle>
       </ion-item>
 
+      <ion-item>
+        <ion-label>disabled="true"</ion-label>
+        <ion-toggle disabled="true"></ion-toggle>
+      </ion-item>
+
     </ion-list>
 
   </form>

src/components/toggle/toggle.ts

@@ -304,6 +304,13 @@ export class Toggle extends Ion implements IonicTapInput, AfterContentInit, Cont
     this._elementRef.nativeElement.querySelector('button').focus();
   }
 
+  /**
+   * @private
+   */
+  setDisabledState(isDisabled: boolean) {
+    this.disabled = isDisabled;
+  }
+
   /**
    * @private
    */