diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index 6d2f22ea55..c44ef685bf 100644 --- a/src/components/checkbox/checkbox.ts +++ b/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 */ diff --git a/src/components/checkbox/test/basic/app-module.ts b/src/components/checkbox/test/basic/app-module.ts index 6db2907631..bcd214b028 100644 --- a/src/components/checkbox/test/basic/app-module.ts +++ b/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) { diff --git a/src/components/checkbox/test/basic/main.html b/src/components/checkbox/test/basic/main.html index 5f403370ff..5373529bd2 100644 --- a/src/components/checkbox/test/basic/main.html +++ b/src/components/checkbox/test/basic/main.html @@ -25,12 +25,12 @@ Cherry, formControlName, disabled - + Grape, formControlName, checked, disabled - + diff --git a/src/components/datetime/datetime.ts b/src/components/datetime/datetime.ts index b73799542b..4cdb8dee73 100644 --- a/src/components/datetime/datetime.ts +++ b/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 */ diff --git a/src/components/datetime/test/form/app-module.ts b/src/components/datetime/test/form/app-module.ts new file mode 100644 index 0000000000..a5a39c92e6 --- /dev/null +++ b/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: '' +}) +export class E2EApp { + root = E2EPage; +} + +@NgModule({ + declarations: [ + E2EApp, + E2EPage + ], + imports: [ + IonicModule.forRoot(E2EApp) + ], + bootstrap: [IonicApp], + entryComponents: [ + E2EPage + ] +}) +export class AppModule {} diff --git a/src/components/datetime/test/form/main.html b/src/components/datetime/test/form/main.html new file mode 100644 index 0000000000..76450ae968 --- /dev/null +++ b/src/components/datetime/test/form/main.html @@ -0,0 +1,32 @@ + + + + Datetime + + + + + + +
+ + Stacked + + + + + Floating + + + + + Fixed + + + + + Inline + + +
+ diff --git a/src/components/radio/radio-button.ts b/src/components/radio/radio-button.ts index 959338790d..f954122f35 100644 --- 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 index 1088076f11..253e48cb6c 100644 --- 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 index 24822d7a43..35fc3a17da 100644 --- 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 index f52c56e5d3..9fd1245521 100644 --- a/src/components/radio/test/basic/main.html +++ b/src/components/radio/test/basic/main.html @@ -142,4 +142,30 @@ + + Disabled radio-group + + Friends + + + + Enemies + + + + +
+ + Disabled formGroup + + Friends + + + + Enemies + + + +
+ diff --git a/src/components/range/range.ts b/src/components/range/range.ts index c9eae43c80..54e1984731 100644 --- 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 index 39c32e9e45..364794dbb4 100644 --- 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 index 40de99d65a..96df50c141 100644 --- a/src/components/range/test/basic/page1.html +++ b/src/components/range/test/basic/page1.html @@ -101,7 +101,20 @@ dual, step=3, snaps, {{dualValue2 | json}} - +
+ + + disabled, range, formControlName + + + + + dual, disabled, formControlName + + + +
+ diff --git a/src/components/select/select.ts b/src/components/select/select.ts index 7a31dd09f4..e7e80c6317 100644 --- a/src/components/select/select.ts +++ b/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 */ diff --git a/src/components/select/test/single-value/app-module.ts b/src/components/select/test/single-value/app-module.ts index 6acd44d8a2..6855007443 100644 --- a/src/components/select/test/single-value/app-module.ts +++ b/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]; } diff --git a/src/components/select/test/single-value/main.html b/src/components/select/test/single-value/main.html index 54ff20ddfc..dcafc93d36 100644 --- a/src/components/select/test/single-value/main.html +++ b/src/components/select/test/single-value/main.html @@ -125,4 +125,16 @@

+
+ + formControlName, disabled + + Grape + Cherry + Strawberry + Mango + + +
+ diff --git a/src/components/toggle/test/basic/app-module.ts b/src/components/toggle/test/basic/app-module.ts index d9f511ac96..0251a00dd7 100644 --- a/src/components/toggle/test/basic/app-module.ts +++ b/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) { diff --git a/src/components/toggle/test/basic/main.html b/src/components/toggle/test/basic/main.html index af69cced18..8da29221b6 100644 --- a/src/components/toggle/test/basic/main.html +++ b/src/components/toggle/test/basic/main.html @@ -35,12 +35,12 @@ Cherry, formControlName, disabled - + Grape, formControlName, checked, disabled - + @@ -53,6 +53,11 @@ + + disabled="true" + + + diff --git a/src/components/toggle/toggle.ts b/src/components/toggle/toggle.ts index 9b4b716352..6d387c5218 100644 --- a/src/components/toggle/toggle.ts +++ b/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 */