Merge pull request #10006 from driftyco/fix-disabled-form-control

fix(forms): set disabled components from form control

src/components/checkbox/checkbox.ts

@@ -231,6 +231,13 @@ export class Checkbox extends Ion implements IonicTapInput, AfterContentInit, Co
     this._init = true;
   }
 
+  /**
+   * @private
+   */
+  setDisabledState(isDisabled: boolean) {
+    this.disabled = isDisabled;
+  }
+
   /**
    * @private
    */

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

@@ -17,8 +17,8 @@ export class E2EPage {
 
   appleCtrl = new FormControl(true);
   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,
@@ -28,7 +28,6 @@ export class E2EPage {
   });
 
   constructor() {
-    this.grapeDisabled = true;
     this.grapeChecked = true;
     this.standAloneChecked = true;
   }
@@ -38,7 +37,7 @@ export class E2EPage {
   }
 
   toggleGrapeDisabled() {
-    this.grapeDisabled = !this.grapeDisabled;
+    this.fruitsForm.get('grape').enabled ? this.fruitsForm.get('grape').disable() : this.fruitsForm.get('grape').enable();
   }
 
   kiwiChange(checkbox: Checkbox) {

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

@@ -25,12 +25,12 @@
 
       <ion-item>
         <ion-label>Cherry, formControlName, disabled</ion-label>
-        <ion-checkbox disabled="true" formControlName="cherry"></ion-checkbox>
+        <ion-checkbox formControlName="cherry"></ion-checkbox>
       </ion-item>
 
       <ion-item>
         <ion-label>Grape, formControlName, checked, disabled</ion-label>
-        <ion-checkbox [checked]="grapeChecked" [disabled]="grapeDisabled" formControlName="grape"></ion-checkbox>
+        <ion-checkbox [checked]="grapeChecked" formControlName="grape"></ion-checkbox>
       </ion-item>
 
       <ion-item>

src/components/datetime/datetime.ts

@@ -860,6 +860,13 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
    */
   onTouched() { }
 
+  /**
+   * @private
+   */
+  setDisabledState(isDisabled: boolean) {
+    this.disabled = isDisabled;
+  }
+
   /**
    * @private
    */

src/components/datetime/test/form/app-module.ts

@@ -0,0 +1,46 @@
+import { Component, NgModule } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+  stackedCtrl = new FormControl('1994-12-15T13:47:20.789');
+  floatingCtrl = new FormControl('1995-04-15');
+  fixedCtrl = new FormControl({value: '2002-09-23T15:03:46.789', disabled: true});
+  inlineCtrl = new FormControl({value: '2005-06-17T11:06Z', disabled: true});
+
+  datetimeForm = new FormGroup({
+    'stacked': this.stackedCtrl,
+    'floating': this.floatingCtrl,
+    'fixed': this.fixedCtrl,
+    'inline': this.inlineCtrl
+  });
+
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class E2EApp {
+  root = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EPage
+  ]
+})
+export class AppModule {}

src/components/datetime/test/form/main.html

@@ -0,0 +1,32 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Datetime</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content class="outer-content">
+  <form [formGroup]="datetimeForm">
+    <ion-item>
+      <ion-label stacked>Stacked</ion-label>
+      <ion-datetime formControlName="stacked"></ion-datetime>
+    </ion-item>
+
+    <ion-item>
+      <ion-label floating>Floating</ion-label>
+      <ion-datetime formControlName="floating" displayFormat="MMMM YY"></ion-datetime>
+    </ion-item>
+
+    <ion-item>
+      <ion-label fixed>Fixed</ion-label>
+      <ion-datetime formControlName="fixed" displayFormat="MM/DD/YYYY"></ion-datetime>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Inline</ion-label>
+      <ion-datetime formControlName="inline" displayFormat="MM/DD/YYYY"></ion-datetime>
+    </ion-item>
+  </form>
+</ion-content>

src/components/radio/radio-button.ts

@@ -173,7 +173,7 @@ export class RadioButton extends Ion implements IonicTapInput, OnDestroy, OnInit
    */
   @Input()
   get disabled(): boolean {
-    return this._disabled;
+    return this._disabled || (this._group != null && this._group.disabled);
   }
   set disabled(val: boolean) {
     this._disabled = isTrueProperty(val);
@@ -207,6 +207,10 @@ export class RadioButton extends Ion implements IonicTapInput, OnDestroy, OnInit
     if (this._group && isPresent(this._group.value)) {
       this.checked = isCheckedProperty(this._group.value, this.value);
     }
+
+    if (this._group && this._group.disabled) {
+      this.disabled = this._group.disabled;
+    }
   }
 
   /**

src/components/radio/radio-group.ts

@@ -1,8 +1,8 @@
-import { ChangeDetectorRef, ContentChild, Directive, ElementRef, EventEmitter, forwardRef, Output, Renderer } from '@angular/core';
+import { ChangeDetectorRef, ContentChild, Directive, ElementRef, EventEmitter, forwardRef, Input, Output, Renderer } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { ListHeader } from '../list/list-header';
-import { isCheckedProperty } from '../../util/util';
+import { isCheckedProperty, isTrueProperty } from '../../util/util';
 import { RadioButton } from './radio-button';
 
 export const RADIO_VALUE_ACCESSOR: any = {
@@ -71,6 +71,11 @@ export const RADIO_VALUE_ACCESSOR: any = {
 })
 export class RadioGroup {
 
+  /**
+   * @internal
+   */
+  _disabled: boolean = false;
+
   /**
    * @private
    */
@@ -101,6 +106,17 @@ export class RadioGroup {
    */
   id: number;
 
+  /**
+   * @input {boolean} Whether all radio buttons in the group should be disabled. Default false.
+   */
+  @Input()
+  get disabled(): boolean {
+    return this._disabled;
+  }
+  set disabled(val: boolean) {
+    this._disabled = isTrueProperty(val);
+  }
+
   /**
    * @output {any} expression to be evaluated when selection has been changed
    */
@@ -248,6 +264,13 @@ export class RadioGroup {
    */
   onTouched() {}
 
+  /**
+   * @private
+   */
+  setDisabledState(isDisabled: boolean) {
+    this.disabled = isDisabled;
+  }
+
 }
 
 let radioGroupIds = -1;

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

@@ -18,6 +18,11 @@ export class E2EPage {
     'fruitsCtrl': this.fruitsCtrl
   });
 
+  friendsCtrl = new FormControl({value: 'enemies', disabled: true});
+  friendsForm = new FormGroup({
+    'friendsCtrl': this.friendsCtrl
+  });
+
   currenciesControl = new FormControl('EUR');
   currencyForm = new FormGroup({
     'currenciesControl': this.currenciesControl

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

@@ -142,4 +142,30 @@
     </ion-item>
   </ion-list>
 
+  <ion-list radio-group disabled="true" [(ngModel)]="relationship">
+    <ion-list-header>Disabled radio-group</ion-list-header>
+    <ion-item>
+      <ion-label>Friends</ion-label>
+      <ion-radio value="friends"></ion-radio>
+    </ion-item>
+    <ion-item>
+      <ion-label>Enemies</ion-label>
+      <ion-radio value="enemies"></ion-radio>
+    </ion-item>
+  </ion-list>
+
+  <form [formGroup]="friendsForm">
+    <ion-list radio-group formControlName="friendsCtrl">
+      <ion-list-header>Disabled formGroup</ion-list-header>
+      <ion-item>
+        <ion-label>Friends</ion-label>
+        <ion-radio value="friends"></ion-radio>
+      </ion-item>
+      <ion-item>
+        <ion-label>Enemies</ion-label>
+        <ion-radio value="enemies"></ion-radio>
+      </ion-item>
+    </ion-list>
+  </form>
+
 </ion-content>

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
    */

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}`);
   }

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>

src/components/select/select.ts

@@ -487,6 +487,13 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
    */
   onTouched() { }
 
+  /**
+   * @private
+   */
+  setDisabledState(isDisabled: boolean) {
+    this.disabled = isDisabled;
+  }
+
   /**
    * @private
    */

src/components/select/test/single-value/app-module.ts

@@ -1,4 +1,5 @@
 import { Component, NgModule } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
 import { IonicApp, IonicModule } from '../../../..';
 
 export interface Currency {
@@ -55,6 +56,11 @@ export class E2EPage {
   ];
   currency: Currency;
 
+  fruitCtrl = new FormControl({value: 'grape', disabled: true});
+  fruitsForm = new FormGroup({
+    'fruit': this.fruitCtrl
+  });
+
   constructor() {
     this.currency = this.currencies[0];
   }

src/components/select/test/single-value/main.html

@@ -125,4 +125,16 @@
     <br>
   </p>
 
+  <form [formGroup]="fruitsForm">
+    <ion-item>
+      <ion-label>formControlName, disabled</ion-label>
+      <ion-select formControlName="fruit">
+        <ion-option>Grape</ion-option>
+        <ion-option>Cherry</ion-option>
+        <ion-option>Strawberry</ion-option>
+        <ion-option>Mango</ion-option>
+      </ion-select>
+    </ion-item>
+  </form>
+
 </ion-content>

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
    */