fix(range): set disabled state from FormControl

ionic-team · Jan 12, 2017 · 8e64a28 · 8e64a28
1 parent 99c493e
commit 8e64a28
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 1 deletion.
diff --git a/src/components/range/range.ts b/src/components/range/range.ts
@@ -626,6 +626,13 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O
    */
   onTouched() { }
 
+  /**
+   * @private
+   */
+  setDisabledState(isDisabled: boolean) {
+    this.disabled = isDisabled;
+  }
+
   /**
    * @private
    */

diff --git a/src/components/range/test/basic/app-module.ts b/src/components/range/test/basic/app-module.ts
@@ -1,4 +1,5 @@
 import { Component, NgModule } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
 import { IonicApp, IonicModule, Range } from '../../../..';
 
 
@@ -13,6 +14,14 @@ export class Page1 {
   dualValue: any;
   dualValue2 = {lower: 33, upper: 60};
 
+  rangeCtrl = new FormControl({value: '66', disabled: true});
+  dualRangeCtrl = new FormControl({value: {lower: 33, upper: 60}, disabled: true});
+
+  rangeForm = new FormGroup({
+    'range': this.rangeCtrl,
+    'dualRange': this.dualRangeCtrl
+  });
+
   rangeChange(range: Range) {
     console.log(`range, change, ratio: ${range.ratio}, value: ${range.value}`);
   }

diff --git a/src/components/range/test/basic/page1.html b/src/components/range/test/basic/page1.html
@@ -101,7 +101,20 @@
       <ion-label>dual, step=3, snaps, {{dualValue2 | json}}</ion-label>
       <ion-range dualKnobs="true" [(ngModel)]="dualValue2" min="21" max="72" step="3" snaps="true"></ion-range>
     </ion-item>
-
   </ion-list>
 
+  <form [formGroup]="rangeForm">
+    <ion-list>
+      <ion-item>
+        <ion-label>disabled, range, formControlName</ion-label>
+        <ion-range formControlName="range"></ion-range>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>dual, disabled, formControlName</ion-label>
+        <ion-range dualKnobs="true" formControlName="dualRange"></ion-range>
+      </ion-item>
+    </ion-list>
+  </form>
+
 </ion-content>