feat(radio): add disabled to radio-group and support disabled formcon…

…trol fixes #9998
ionic-team · Jan 12, 2017 · 3e9427b · 3e9427b
1 parent 0aad835
commit 3e9427b
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 3 deletions.
diff --git a/src/components/radio/radio-button.ts b/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;
+    }
   }
 
   /**

diff --git a/src/components/radio/radio-group.ts b/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;
diff --git a/src/components/radio/test/basic/app-module.ts b/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

diff --git a/src/components/radio/test/basic/main.html b/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>