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

fixes #9998
This commit is contained in:
Brandy Carney
2017-01-12 17:37:00 -05:00
parent 0aad835478
commit 3e9427bada
4 changed files with 61 additions and 3 deletions

View File

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

View File

@ -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 { NG_VALUE_ACCESSOR } from '@angular/forms';
import { ListHeader } from '../list/list-header'; import { ListHeader } from '../list/list-header';
import { isCheckedProperty } from '../../util/util'; import { isCheckedProperty, isTrueProperty } from '../../util/util';
import { RadioButton } from './radio-button'; import { RadioButton } from './radio-button';
export const RADIO_VALUE_ACCESSOR: any = { export const RADIO_VALUE_ACCESSOR: any = {
@ -71,6 +71,11 @@ export const RADIO_VALUE_ACCESSOR: any = {
}) })
export class RadioGroup { export class RadioGroup {
/**
* @internal
*/
_disabled: boolean = false;
/** /**
* @private * @private
*/ */
@ -101,6 +106,17 @@ export class RadioGroup {
*/ */
id: number; 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 * @output {any} expression to be evaluated when selection has been changed
*/ */
@ -248,6 +264,13 @@ export class RadioGroup {
*/ */
onTouched() {} onTouched() {}
/**
* @private
*/
setDisabledState(isDisabled: boolean) {
this.disabled = isDisabled;
}
} }
let radioGroupIds = -1; let radioGroupIds = -1;

View File

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

View File

@ -142,4 +142,30 @@
</ion-item> </ion-item>
</ion-list> </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> </ion-content>