mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
feat(radio): add disabled to radio-group and support disabled formcontrol
fixes #9998
This commit is contained in:
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -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;
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
|
Reference in New Issue
Block a user